一、根据后台需要的字段需求
前端需要将图片格式传给后台
这里有一个快速解决办法
// 图片转换base64
getFile (file, fileList) {
this.getBase64(file.raw).then(res => {
this.base64Image = res
})
},
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)
}
})
},
以上是一个转换方法于是我通过element-UI中的upload组件实现以下功能
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:on-change="getFile"
:auto-upload="false"
:before-upload="beforeAvatarUpload">
<img v-if="base64Image" :src="base64Image" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
这是一个可以直接用的方法