upload单张图片

最近写了elementui上传图片功能。在回显的时候遇到了点小问题。这里做一下总结,方便以后使用

1.就算设置了:limit="1",也会显示第二个可以添加图片的按钮(虽然不能点击使用),所以用overflow:hidden隐藏掉
2.el-dialog是用于图片放大的,需要放在最外层。:modal-append-to-body='false' 可以避免遮罩层冲突的bug。
3.只适用于单张图片

* 广告图:
data() {
    return {
        //图片
        oss_url: baseUrl2 + '/backOSS/uploadOSSPic',//上传图片oss路径
        dialogImageUrl: '',//放大图片的url
        dialogVisible: false,//放大图片的显示隐藏
        fileList1: [],//图片
        form:{},//参数,其中的advPic是上传图片的oss路径
    };
},

编辑时候回显:
this.fileList1 = [{
    url:res.data.advPic
}]

//图片处理
handleRemove(file, fileList) {
    this.form.advPic = "";
},
handlePictureCardPreview(file) {
    this.dialogImageUrl = file.url;
    this.dialogVisible = true;
},
upload_success(res, file, fileList) {
    if (res && res.code == "0") {
        this.form.advPic = res.data;
        success1(this, "图片上传成功")
    } else {
        warning1(this, "图片上传失败")
    }
},
upload_error(err, file, fileList) {
    console.log(err);
    warning1(this, "图片上传失败")
},

你可能感兴趣的:(upload单张图片)