element-upload 限制文件尺寸、格式、大小以及隐藏上传框

在VUE项目中使用了element的upload上传图片组件
要求

  1. 只能上传jpg / png格式
  2. 图片大小不能超过2M
  3. 图片像素要大于600*400
  4. 图片数量达到上限的时候隐藏上传的框框

模板html

<template>
<div>
<el-upload 
  action = "#"                               //上传的地址,必填
  list-type = "picture-card"                 //文件列表类型,text/picture/picture-card
  :class = "{disabled:isMax}"                //动态绑定class,(此处是隐藏上传框的关键)
  :limit = 3                                 //限制上传图片的数量
  :on-success = "success"                    //文件上传成功的钩子
  :on-error = "error"                        //文件上传失败的钩子
  :on-change = "change"                      //文件状态改变的钩子
  :on-progress = "progress"                  //文件上传时候的钩子 
  :on-remove = "remove"                      //文件移除的钩子
  :before-upload = "beforeAvatarUpload">     //文件上传前的钩子
  <i class="el-icon-upload"></i>           
  <div class="el-upload__text">封面</div>
</el-upload>
</div>
</template>

一、限制图片尺寸、格式、大小

:before-upload的钩子里限制

beforeAvatarUpload:function(file){
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isPG = (isJPG || isPNG)                                       //限制图片格式为jpg / png
      const isLt2M = file.size / 1024 / 1024 < 2;                         //限制图片大小
      const isSize = new Promise(function(resolve,reject) {
          let width = 600
          let height = 400
          let _URL = window.URL || window.webkitURL
          let img = new Image()
          img.onload = function() {
              let valid = img.width >= width && img.height >= height
              valid ? resolve() : reject();
          }
          img.src = _URL.createObjectURL(file)
      }).then(() => {
          return file;
      },()=>{
          this.$message.error('上传图片像素要大于600*400!');
          return promise.reject();
      })
      if (!isPG) {
          this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
      }
      if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
      }
        return isPG && isLt2M && isSize
    }
  }

1). window.URL(/window.webkitURL)window对象,将blob或file读取成一个url
格式:

window.URL.createObjectURL(file / blob)
window.webkitURL.createObjectURL(file / blob)

2). image.onload():image对象的onload事件,当图片加载完成后执行的函数

二、限制上传图片数量

upload有一个:limit参数属性以及on-exceed文件超出个数限制的钩子

<el-upload 
  action = "#"
  list-type = "picture-card"
  :limit = 3
  :on-exceed = "exceed">
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">封面</div>
</el-upload>

exceed:function(){
   this.$message.error('最多只能上传3张图片')
},

通过这种方式可以限制用户上传图片的数量但是用户体验不佳,当图片数量达到上限的时候上传图片的框框还在,所以下面就用另外一种方法,当图片数量达到上限之后隐藏上传的框。
在这里插入图片描述

三、隐藏上传框

在这里插入图片描述
先是看到DOM结构可以知道我们要隐藏的是下面的空白上传框
在这里插入图片描述
1.) 动态绑定class:

<el-upload 
    :class = "{disabled:isMax}"
    :on-change = "change"
    :on-remove = "remove"
    :on-error = "error">
</el-upload>

2.) 在data中初始化isMax

data() {
    return {
      isMax : false,
    };
 },
 

3.) 在图片上传(改变) / 删除的时候判断isMax

change:function(file,fileList){
      console.log('change')
      if(fileList.length >= 3){
        this.isMax = true
      }
  },
  remove:function(file,fileList){
      console.log('remove')
      if(fileList.length < 3){
        this.isMax = false
      }
  },
//上传失败的时候会出现Bug,故在上传失败的时候也进行一下判断
error:function(err, file, fileList){
      this.$message.error('上传失败')
      if(fileList.length >= 3){
        this.isMax = true
      }else{
        this.isMax = false
      }
  },
.disabled .el-upload--picture-card{
    display: none
}

当只选择.disabled的时候发现所有都会被隐藏,即disabled是加在整个的div上的,于是加一个.el-upload--picture-card精确到空白上传框上

  • 17
    点赞
  • 59
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值