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;
    },