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

   日期:2020-05-30     浏览:192    评论:0    
核心提示:需求要求:上传图片不超过五张,每张图片不超过20M,达到五张限制后自动隐藏上传组件实现HTML代码:关键代码 :class={‘hide’:hideUploadAdd},这个是样式控制

需求

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

实现效果:

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服