elementUi upload上传达到limit后隐藏upload图标

原创已于 2022-10-29 15:45:20 修改 · 3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #前端 #javascript

于 2022-10-29 15:39:26 首次发布

博客介绍了给ElementUI的upload组件添加动态class属性，实现当达到limit条数据后隐藏、否则显示的功能。此处理方式是为满足只需上传一张图片且图片可删除的需求，还涉及template模块、script模块及css控制图标隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给upload组件添加一个动态class属性，当达到了limit条数据之后就隐藏，否则显示。当时是因为遇到只需要上传一张图片, 又想图片可删除操作而选择的这一种方式处理。

template模块

<el-upload
  list-type="picture-card"
  :class="{hide: hideUpload}"
  :limit="limit"
  :file-list="fileList"
  :action="action"
  :on-exceed="handleExceed"
  :on-success="handleSuccess"
  :on-remove="handleRemove"
  :on-preview="handlePictureCardPreview"
  :before-upload="beforeAvatarUpload"
>
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogImgVisible">
  <img width="100%" :src="dialogImageUrl" alt />
</el-dialog>

script模块

data(){
	return {
	  action: 'xxxxxxx',
	  // 预览图片url地址
      dialogImageUrl: '',
      dialogImgVisible: false,
      // 可上传图片限制
      limit: 2,
      fileList: [],
	}
},
computed: {
	hideUpload() {
		return  this.fileList.length >= this.limit;
	},
},
methods: {
	// 当不隐藏upload图标, 可以通过handleExceed方法去阻止上传操作
	handleExceed(file, fileList){
		this.$message.error(`图片不能超过${this.limit}张!`);
	},
	// 上传成功后的操作;
	handleSuccess(res, file, fileList) {
		if (res.code===0){
			// 不建议使用push操作:影响本身Upload渲染
			// this.fileLis.push(res.data[0]);
			this.fileList = [...fileList];
		}
	},
	// 移除图片时的操作
	handleRemove(file, fileList) {},
	// 预览图片
	handlePictureCardPreview(file) {
		this.dialogImageUrl = file.url;
		this.dialogImgVisible = true;
	},
	// 上传图片成功之前对图片进行检验, 阻止可能出现上传图片type属于jpg, 但扩展名不是jpg, 虽然能显示，事实并未上传成功的状态;
	beforeAvatarUpload(file){},
},

css控制图标隐藏

.hide /deep/ .el-upload--picture-card {
	display: none;
}