element-ui el-upload组件，上传完成后隐藏上传按钮

矫情吗；* 2023-03-13 06:44 2阅读 0赞

**项目开发中要求最多只能上传3张图片，最后一张图片上传完成后隐藏上传按钮，解决方法如下：**

代码示例：

<el-upload
     :class="{uoloadSty:showBtnDealImg,disUoloadSty:noneBtnImg}"
     :action="dealImgUrl"
     list-type="picture-card"
     :on-preview="handleDealImgPreview"
     :on-remove="handleDealImgRemove"
     :on-success="successDealImg"
     :before-upload="beforeUploadDealImg"
     :on-change="dealImgChange"
     :file-list="dealImgFileList"
     accept=".jpeg,.jpg,.gif,.png"
     :limit="limitCountImg"
    >
     <i class="el-icon-plus"></i>
    </el-upload>

效果图如下：  
![在这里插入图片描述][20200512170238298.gif]

**1.动态绑定样式属性**

:class="{uoloadSty:showBtnDealImg,disUoloadSty:noneBtnDealImg}"

data中定义

data(){
    	return{
    	  showBtnDealImg:true,
          noneBtnDealImg:false,
          limitCountImg:3   //上传图片的最大数量
    	}
    }

css样式

**2.超过3张图片隐藏上传按钮，小于3张图片上传按钮显示**

图片状态改变时触发,在on-change事件中判断图片数量

imgChange(file, fileList){
      this.noneBtnImg = fileList.length >= this.limitCountImg;
    },

删除图片时触发，在on-remove事件中判断图片数量

handleImgRemove(file,fileList){
    	this.noneBtnImg = fileList.length >= this.limitCountImg;
    }

[20200512170238298.gif]: /images/20230312/2990c5ea952746b1b6e1a5e5ac5af94c.png