elementui文件（图片）上传组件对图片大小和类型进行判断限制

1，先在el-upload设置accept属性，限定文件类型

<el-upload  accept=".jpg,.jpeg,.png,.gif.JPG,.JPEG,.PNG,.GIF" >

 

但这样做只能限制上传文件时打开的文件上传对话框右下角默认文件类型为指定类型，实际上用户还是可以在上传对话框右下角选则“全部文件”

 

2，给<el-upload>绑定:before-upload="beforeUpload"  （before-upload：上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传）

 

<el-upload :before-upload="beforeUpload"  accept=".jpg,.jpeg,.png,.gif.JPG,.JPEG,.PNG,.GIF" >

 

3，beforeUpload函数代码（判断和限制文件类型，限制文件大小）：

 

// 上传文件之前对文件大小和类型做限制，官方自带accept属性还是可以选中全部文件
    beforeUpload(file) {
      let types = ['image/jpeg', 'image/jpg', 'image/gif', 'image/bmp', 'image/png'];
      const isImage = types.includes(file.type);
      const isLtSize = file.size / 1024 / 1024 < 2;
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、gif、bmp、PNG 格式!');
        return false;
      }
      if (!isLtSize) {
        this.$message.error('上传图片大小不能超过 2MB!');
        return false;
      }
      return true;
    },