el-upload 上传照片墙上传照片，上传一张之后，上传框就消失

动态上传限制与隐藏：前端文件上传管理策略

最新推荐文章于 2024-10-15 13:28:17 发布

转载最新推荐文章于 2024-10-15 13:28:17 发布 · 1.6k 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_44816197/article/details/122302048?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0-122302048-blog-119281273.pc_relevant_multi_platform_whitelistv1&spm=1001.2101.3001.4242.1&utm_relevant_index

文章标签：

#el-upload

本文介绍如何在前端使用El-upload组件实现图片上传数量限制，并通过on-change和on-remove事件管理隐藏上传框。通过data中hideUpload_introduce属性和方法中的处理函数，当文件数量达到限制时隐藏上传框，删除文件后重新显示。

在这里插入图片描述
上传之后，右边的这个框就隐藏
在el-upload标签上添加一个：:class="{ hide: hideUpload_introduce }"，动态的class

data里面

hideUpload_introduce: false,
limitCount: 1,

同时在el-upload上的两个钩子添加事件:on-change=“handleIntroduceUploadHide”，注意，如果我们要删除照片，删除之后，是希望上传框出现的，所以还要:on-remove=“handleIntroduceRemove”，在删除时触发事件，显示上传框
methods里面

handleIntroduceUploadHide(file, fileList) {
  this.ruleForm.hideUpload_introduce =
    fileList.length >= this.ruleForm.limitCount;
},
    handleIntroduceRemove(file, fileList) {
  this.ruleForm.hideUpload_introduce =
    fileList.length >= this.ruleForm.limitCount;
},

style 里面

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

el-upload 上传 照片墙上传照片，上传一张之后，上传框就消失

el-upload 上传照片墙上传照片，上传一张之后，上传框就消失