Element UI Upload 组件 上传图片可删除、预览；设置只允许上传单张 / 多张图片的操作

Element UI Upload 组件 上传图片可删除、预览；设置只允许上传单张 / 多张图片的操作

效果

上传图片单张图片，可删除、预览 完整代码

如果不上传单张图片，可以把 :limit=“1” 删除，把单张图片操作步骤删除就是多张图片上传咯！

html部分

<el-form-item label="头像" prop="csAvatar">
      <el-upload action="aaa" list-type="picture-card" :class="{ disabled: uploadDisabled }"
      :auto-upload="false" :limit="1" ref="upload" :on-change="handleChange" :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove" :file-list="fileList">
        <i class="el-icon-plus"></i>
      </el-upload>
      <!-- 预览图片 -->
      <el-dialog :visible.sync="dialogVisibleimg" append-to-body>
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
</el-form-item>

javascript

data(){
	return {
	   dialogVisibleimg: false,
	   dialogImageUrl: "",
	   formdata: new FormData(),
	   fileList: [],
	   addimg: [],
	   removeimg: [],
	   ruleForm: {
          csAvatar: "",
       }
	},
	methods:{
		// 添加活动展示照片
		handleChange(file, fileList) {
		  const isJPG =file.raw.type === "image/jpeg" || file.raw.type === "image/png";
		  const isLt5M = file.size / 1024 / 1024 < 5;
		  if (!isJPG) {
		    this.$message.error("上传头像图片只能是 JPG 、png 格式!");
		    fileList.splice(-1, 1);//移除错误文件
		    return false;
		  }
		  if (!isLt5M) {
		    this.$message.error("上传头像图片大小不能超过 5MB!");
		    fileList.splice(-1, 1);
		    return false;
		  }
		  this.addimg = fileList[0].raw;
		  this.ruleForm.csAvatar = this.addimg;
		},
		// 删除活动展示照片
		handleRemove(file, fileList) {
		  console.log(fileList)
		  this.ruleForm.csAvatar = '';
		  this.formdata = new FormData();
		},
		// 活动展示照片预览
		handlePictureCardPreview(file) {
		  this.dialogImageUrl = file.url;
		  this.dialogVisibleimg = true;
		},
		// 渲染编辑获取id
	    apply() {
	      this.fileList = [{ url: "" }];//这里是踩坑的点，必须写
	      this.fileList[0].url = res.data.csAvatar;//这里是调用接口获取到的值 res.data.csAvatar，赋值就可以回显了
	      //this.fileList[0].url 做的是单张图片回显，多张图片回显可以去掉[0]
	    },
	    // 提交上传按钮
	    submitForm(formName) {
	      this.$refs[formName].validate((valid) => {
	        if (valid) {
	          this.formdata = new FormData();
	          if(this.ruleForm.csAvatar){//新增
	            this.formdata.append("picture", this.ruleForm.csAvatar);//上传图片要把参数和值放在FormData里
	            //如果有其他参数，也要一并放在this.formdata里
	           /* 例：
	            this.formdata.append("csLevel", this.ruleForm.serviceLevel);
          		this.formdata.append("csMaximum", this.ruleForm.size);
          		*/
	          }
	          //上传图片的接口（重要看传参部分怎么传参）
            CustomerServiceController.add(this, this.formdata)//传参直接传this.formdata即可
              .then((res) => {
                if (res.success == true) {
                  this.$message.success("新建成功");
                } else {
                  this.$message.error("新建失败");
                }
              })
              .catch((e) => {});
	        } else {
	          console.log("error submit!!");
	          return false;
	        }
	      });
	    },
	},
	computed: {
	    uploadDisabled: function () {
	      console.log(this.ruleForm.csAvatar)
	      return this.ruleForm.csAvatar !='';
	    },
	},
}

css

.disabled{
    .el-upload--picture-card{
      display: none;
    }
  }

Element UI Upload 组件 设置只允许上传单张图片的操作

只要在检测到上传列表中已经有一张图片时，就隐藏上传组件，只展示上传列表。

那么就可以给整个上传组件一个class名称，这个class没有任何样式，只是做选择器用。
比如：disabled
那么就在监测到上传一张后，隐藏disabled 下面的 el-upload–picture-card

js：

computed: {
     uploadDisabled:function() {
        return this.imagelist.length >0    
     },  
},

css：

.disabled .el-upload--picture-card {
	display: none;
}

uploadDiseabled 会根据上传列表的长度动态的给upload的组件添加样式，进而将达到只上传一张的效果。然后这个方法也可以用于限制上传张数。