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

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

效果

Element UI Upload 组件 上传图片可删除、预览;设置只允许上传单张 / 多张图片的操作_第1张图片
Element UI Upload 组件 上传图片可删除、预览;设置只允许上传单张 / 多张图片的操作_第2张图片
Element UI Upload 组件 上传图片可删除、预览;设置只允许上传单张 / 多张图片的操作_第3张图片

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

如果不上传单张图片,可以把 :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 组件 设置只允许上传单张图片的操作

只要在检测到上传列表中已经有一张图片时,就隐藏上传组件,只展示上传列表。
Element UI Upload 组件 上传图片可删除、预览;设置只允许上传单张 / 多张图片的操作_第4张图片

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

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

js:

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

css:

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

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

你可能感兴趣的:(vue功能,vue.js,javascript,html5,css3,node.js)