项目开发中要求最多只能上传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>

效果图如下:
在这里插入图片描述

1.动态绑定样式属性

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

data中定义

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

css样式

<style>
.uoloadSty .el-upload--picture-card{
  width:110px;
  height:110px;
  line-height:110px;
}
.disUoloadSty .el-upload--picture-card{
  display:none;   /* 上传按钮隐藏 */
}
</style>

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

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

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

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

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

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐