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

需求

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

实现

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

              
              
（最多上传5张图片，每张不超过20M）
            

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代码：

实现效果：