element-ui, upload组件的显示与隐藏以及图片大小的控制uiweixin47711284的博客-

需求

要求：上传图片不超过五张，每张图片不超过20M，达到五张限制后自动隐藏上传组件

实现

HTML代码：
关键代码 :class=”{‘hide’:hideUploadAdd}”，这个是样式控制

<el-upload               action=" "               list-type="picture-card"               multiple               :limit="5"               :file-list="fileListAdd"               :on-preview="handlePictureCardPreview"               :on-remove="handleAddRemove"               :on-change="handleAddChange"               :on-exceed="handleExceed"               :auto-upload="false"               :class="{'hide':hideUploadAdd}"             >               <i class="el-icon-plus"></i>               <div class="el-upload__tip" slot="tip">（最多上传5张图片，每张不超过20M）</div>             </el-upload> 

js代码：

// 上传change事件     handleAddChange(file, fileList) {       // 图片大小限制       const isLt20M = file.size / 1024 / 1024 < 20;       if (!isLt20M) {         this.$message.error("上传图片大小不能超过 20MB!");         // 发现某一张超过大小就从列表移除         fileList.splice(-1, 1);       } else {         this.fileListAdd = fileList;       }       // 上传文件>=限制个数时隐藏上传组件       if (fileList.length >= 5) {         this.hideUploadAdd = true;       }     }, 

css代码：

<style lang='scss'> .hide .el-upload--picture-card {   display: none; } </style> 

实现效果：