记一次Vue使用图片上传及图片回显问题
首先是图片上传的部分
1、不管你是否使用action，都需要写上action，不然会报错
2、getFile是图片上传方法，imageUrl是图片上传后的回显路径
<el-row>
<el-col :span="12">
<el-form-item label="图片:">
<el-upload
class="avatar-uploader"
:on-change="getFile"
:show-file-list="false"
action=""
:auto-upload="false">
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-col>
</el-row>
图片上传方法(getFile)
采用formdata的形式进行文件上传
/**
* 文件上传
*/
getFile(file) {
let fd = new FormData()
fd.append('file', file.raw)// 传文件
this.$httpBlock
.post(this.$httpImageUrl +'/upload',fd, {headers: {'content-type': 'multipart/form-data'}})
.then(res => {
this.imageUrl = this.$httpImageCheckUrl+res.data.data.bucketName+"/"+res.data.data.fileName;
this.msgSuccess('图片上传成功');
})
.catch(err => {
this.msgSuccess('图片上传失败');
});
},
|