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>

实现效果:
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_47711284/article/details/106403718