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

需求

要求：上传图片不超过五张，每张图片不超过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>

实现效果：