<template>
<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:http-request="getFileMsg">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<button @click="submit">獲取圖片base64串</button>
</template>
export default{
data() {
return {
imageUrl: ''
}
},
methods: {
submit(){
console.log('圖片base64串'+this.imageUrl);
},
getFileMsg(content) {
console.log(content);
this.getBase64(content.file).then(res => {
this.imageUrl = res;
})
},
// 轉換base64格式
getBase64(file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function () {
imgResult = reader.result;
};
reader.onerror = function (error) {
reject(error);
};
reader.onloadend = function () {
resolve(imgResult);
};
});
},
}
}