Vue通常与element、iview等框架一起使用，但纯vue仅指将图片转换为base64流的方法。实际上，从vue转换照片base64流与js将图片转换为base64没有区别。只需更改一些语法，然后根据vue的语法更改js的事件、变量定义等。

实例代码：

！DOCTYPE html

Html lang='en '

头(电影)

meta charset=' utf-8 '

元名称=' viewport ' content=' width=device-width，initial-scale=1.0 '

meta http-equiv=' x-ua-compatible ' content=' ie=edge '

在Titlevue上，JS将照片发送到base64案例/title

scriptsrc=' https://cdn . jsdelivr . net/NPM/vue @ 2 . 6 . 14 '/script

/head

菩提

样式类型=‘文本/CSS’

.a-upload {

Padding: 4px 10px:

海特： 20px

Line-height 3360 20 px；

Position:关系：

Cursor: pointer

Color: # 888

Background: # fafafa

Border: 1px solid # ddd

border-radius 3360 4 px:

Overflow: hidden

Display 3360 Inline-block；

* display: inline

*zoom: 1

}

.a-upload input {

Position: absolute:

Font-Size 3360 100 px:

Right : 0；

top : 0；

Opacity : 0；

Filter : Alpha(Opacity=0)；

Cursor: pointer

}

.A-upload 3360 Hover {

Color: # 444

Background: # eee

Border-color 3360 # CCC；

文本-说明：无

}

/style

Div类=' upload-img '

Div id='app '

input type=' file ' class=' a-upload ' name=' upload ' @ change=' uploadimg($ event，1

Img :src='showurl '

/div

/div

Script type='text/javascript '

New Vue({

El: '#app '，

Data: {

Showurl: ' '

}，

Methods: {

UploadImg(e) {

If(！/。(gif | jpg | JPEG | png | BMP | gif | jpg | png)$/。test(e . target . value){

Alert('图片类型为.必须是下列之一：gif、jpeg、jpg、png、bmp！”)。

Return false

}

Const file=e.target.files[0]

Var reader=new FileReader()

//转换为base64

Reader.readasdataurl(文件)

Reader.addeventlistener ('load '，()={

This.showurl=reader.result

Console.log(“这是base64流”，reader.result)

}，false)；

}

}

})。

/脚本

/body

/html

Vue将图片转换为base64流的整个例子。如果报告错误，引入的vue链接可能无法正常工作。请直接更换链接，并在此准备照片传输base64在线工具。

可能需要以下内容：

基本js将图片转换为base64案例。

Vue将图片转换为base64流编码。

Element Ui将图片转换为base64的实例