[解决] el-upload组件自定义上传无法正常显示本地图片
问题说明
在使用el-upload组件中通常会遇到请求不满足的情况或者需要接受参数,这时候我们就会用到自定义上传。而组件库在使用自定义上传的时候会覆盖默认的上传行为,导致我们不能对一些数据进行处理。
文件转base64
自定义图片上传方法,文件参数信息
使用自定义方法上传时,文件参数信息
除了文件信息,还有一些方法参数
解决
使用自定义方法参数信息中的参数对象
// 图片上传
httpUpload (context) {
// 监听上传成功,执行成功的方法
context.onSuccess(e => {})
// 文件转base64,创建文件对象
var reader = new FileReader()
// 读取文件为DataURL
reader.readAsDataURL(context.file)
// load后,才可获取到文件信息
reader.onload = (e) => {
uploadFile({
'image_base64': e.target.result
}).then(({ data }) => {
if (data.code === 200) {
this.imageUrl = data.data.image_url
}
})
}
reader.onerror = function (error) {
console.log('Error: ', error)
}
},
// 点击文件列表中已上传的文件时的钩子
handlePictureCardPreview (file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
// 文件上传成功执行的方法
handleAvatarSuccess (res, file) {
this.showImg = URL.createObjectURL(file.raw)
}