element-upload 限制文件尺寸、格式、大小以及隐藏上传框_vue-element上传图片el-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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

在: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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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

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

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张图片')
},
1
2
3
4
5
6
7
8
9
10
11
12

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

三、隐藏上传框

先是看到DOM结构可以知道我们要隐藏的是下面的空白上传框

1.) 动态绑定class:

<el-upload 
    :class = "{disabled:isMax}"
    :on-change = "change"
    :on-remove = "remove"
    :on-error = "error">
</el-upload>
1
2
3
4
5
6

2.) 在data中初始化isMax

data() {
    return {
      isMax : false,
    };
 },
 
1
2
3
4
5
6

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
      }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.disabled .el-upload--picture-card{
    display: none
}
1
2
3

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