需求,点击编辑图案的时候,需要弹出框,里面除了能修改图片信息之外,还得能够更换图片。
此篇文章主要讲述如何更换图片,,因为时更改单张图片的,所以特别想更换头像 有没有,因此我使用了element ui中的更换头像的插件来写的。
H5中更换图片的部分
<el-upload
:http-request="upLoad"
:action="upload.action"
:show-file-list="false"
:on-success="handleAvatarSuccess"
>
<img
v-if="editForm.dialogImageUrl" //这里写个判断,如果没有更换图片 那么就是显示原来的啦
:src="editForm.dialogImageUrl"
class="dialogPic"
>
</el-upload>
data里面
editForm: {
dialogImageUrl: '', //这个显示图片的地址,是在on-success中获得的,如何获得 element 中有说
picName: '',
picLink: '',
editbanner: '',
imageFile: '' //这个更换图片后 那个图片的文件
},
methods中
// 更换照片-上传头像
async upLoad (file) {
// 把新的图片文件存到editForm中
this.editForm.imageFile = file.file
},
// 更换照片-上传成功后
handleAvatarSuccess (res, file) {
this.editForm.dialogImageUrl = URL.createObjectURL(file.raw)
},