上代码
<el-upload
action="http://clound_clothing.wenkangkeji.com/mlcc/user/interface/uploadImage"
list-type="picture-card"
:limit= "1"
:on-success="handleAvatarSuccess"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
<i class="el-icon-plus"></i>
</el-upload>
对应的变量
dialogImageUrl: '',
dialogVisible: false,
对应的函数处理
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
console.log(file);
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleAvatarSuccess(res, file) {
console.log(res)
this.imageUrl = URL.createObjectURL(file.raw);
this.$store.commit('zidingyiImg', res.data);
},
