第Vue結(jié)合ElementUI上傳Base64編碼后的圖片實(shí)例目錄ElementUI上傳Base64編碼后的圖片安裝ElementUI按需引入(當(dāng)然如果需要你也可以全部引入)上傳實(shí)現(xiàn)ElementUI把上傳的圖片轉(zhuǎn)為Base64

ElementUI上傳Base64編碼后的圖片

自我認(rèn)為ElementUI還是一個(gè)很不錯(cuò)的寫(xiě)手機(jī)端的組件，所以這次做小項(xiàng)目的時(shí)候就用了ElementUI的Upload組件來(lái)實(shí)現(xiàn)圖片的上傳，不過(guò)ElementUI組件的上傳圖片更易于實(shí)現(xiàn)圖片以File文件的形式實(shí)現(xiàn)，但是這次我需要把圖片轉(zhuǎn)換為base64編碼來(lái)實(shí)現(xiàn)圖片的上傳。

安裝ElementUI

npmielement-ui-S

按需引入(當(dāng)然如果需要你也可以全部引入)

import{Upload}from'element-ui'

import'element-ui/lib/theme-chalk/index.css'

Vue.use(Upload);

上傳實(shí)現(xiàn)

template

div

el-upload

:action="actionUrl"

:show-file-list="false"

:on-change="getFile"

imgv-if="imageUrl"ref="phoUrl":src="imageUrl"

iv-else/i

/el-upload

/div

/template

script

import{Toast}from"mint-ui";

exportdefault{

data(){

return{

actionUrl:'',

imageUrl:'',//上傳圖片

};

},

methods:{

getBase64(file){

//把圖片轉(zhuǎn)成base64編碼

returnnewPromise(function(resolve,reject){

letreader=newFileReader();

letimgResult="";

reader.readAsDataURL(file);

reader.onload=function(){

imgResult=reader.result;

};

reader.onerror=function(error){

reject(error);

};

reader.onloadend=function(){

resolve(imgResult);

}

})

},

getFile(file,fileList){

//上傳頭像

this.getBase64(file.raw).then(res={

this.$http.post('home/ImgUpload',{"img":res}).then(result={

if(result.body.status===200){

this.imageUrl=result.body.data;

}else{

Toast('圖片上傳失敗');

}

})

})

}

}

/script

style

.avatar-uploader.el-upload{

border:1pxdashed#d9d9d9;

border-radius:6px;

cursor:pointer;

position:relative;

overflow:hidden;

width:101px;

height:101px;

.avatar-uploader.el-upload:hover{

border-color:#409EFF;

.avatar-uploader.el-upload.el-upload__input{

display:none;

.avatar-uploader-icon{

font-size:28px;

color:#8c939d;

width:100px;

height:100px;

line-height:100px;

text-align:center;

.avatar{

width:100px;

height:100px;

display:block;

/style

ElementUI把上傳的圖片轉(zhuǎn)為Base64

使用組件，然后on-change綁定一個(gè)方法來(lái)獲取文件信息，auto-upload設(shè)置為false即可

el-uploadaction='':on-change="getFile":limit="1"list-type="picture":auto-upload="false"

el-buttonsize="small"type="primary"選擇圖片上傳,最多上傳一張圖片/el-button

/el-upload

定義methods方法,當(dāng)上傳文件就會(huì)觸發(fā)綁定的函數(shù)，然后文件的內(nèi)容就會(huì)綁定到函數(shù)的參數(shù)里面，這樣用file.raw就可以獲取文件的內(nèi)容了。

getFile(file,fileList){

console.log(file.raw)

},

然后自定義一個(gè)方法，用來(lái)把圖片內(nèi)容轉(zhuǎn)為base64格式，imgResult就是base64格式的內(nèi)容了。轉(zhuǎn)為base64字符串要調(diào)用h5特性中的FileReader這個(gè)api,但是這個(gè)api不能return，所以用promise封裝一下。

getBase64(file){

returnnewPromise(function(resolve,reject){

letreader=newFileReader();

letimgResult="";

reader.readAsDataURL(file);

reader.onload=function(){

imgResult=reader.result;

};

reader.onerror=function(error){

reject(error);

};

reader.onloadend=function(){

resolve(imgResult);

};