element-ui el-upload组件，上传完成后隐藏上传按钮，删除后又显示

自己编写：https://blog.csdn.net/weixin_42418774/article/details/107064255

element-ui upload 照片墙回显指定图片，隐藏上传按钮和显示上传按钮，选择图片与提交上传分开（先选择好了，点击确定再上传）

 

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

代码示例：

<el-upload  :class="{uoloadSty:showBtnImg,disUoloadSty:noneBtnImg}" //设置隐藏显示的style  :action="dealImgUrl" //地址  list-type="picture-card"  :on-preview="handleImgPreview" //点击图片放大  :on-remove="handleImgRemove" //移除  :on-success="successImg" //上传成功  :before-upload="beforeUploadImg"  :on-change="imgChange"  :file-list="dealImgFileList"  accept=".jpeg,.jpg,.gif,.png"  :limit="3" //限制个数 >  <i class="el-icon-plus"></i> </el-upload>

效果图如下：

1.动态绑定样式属性

:class="{uoloadSty:showBtnImg,disUoloadSty:noneBtnImg}" 定义变量 data(){ return{ showBtnImg:true, noneBtnImg:false, limitCountImg:3 //上传图片的最大数量 } } style样式 <style> .uoloadSty .el-upload--picture-card{   width:110px;   height:110px;   line-height:110px; } .disUoloadSty .el-upload--picture-card{   display:none;   /* 上传按钮隐藏 */ } </style>

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

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

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

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