Antd react上传图片格式限制的实现代码

<a-upload
:before-upload="beforeUpload"
  >
  // 上传图片宽高比例限制
  const beforeUpload = file => {
    return new Promise((resolve, reject) => {
      // // 图片类型限制
      // let isJpgOrPng = file.type === 'image/png' || file.type === 'image/jpg';
      // if (!isJpgOrPng) {
      //   message.error('格式错误，只能上传jpg、jpeg、png');
      //   return reject(false);
      // }
      // 图片宽高比例限制
      let w = 0,
        h = 0;
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        const image = new Image();
        image.src = reader.result;
        image.onload = () => {
          w = image.width;
          h = image.height;
          const ratio = 670 / 320;
          if (w / h == ratio) {
            // 图片比例为670*320横纵比一致
            return resolve(true);
          } else {
            message.error('图片尺寸错误，只能上传670x320横纵比一致的图片');
            return reject(false);
          }
        };
      };
      // 图片大小限制
      let isLt1M = file.size / 10240 / 10240 <= 1;
      if (!isLt1M) {
        message.error('图片大小超过10MB!');
        return reject(false);
      }
      // return isJpgOrPng && isLt1M; // 限制宽高比例、大小及类型
      return isLt1M; // 只限制宽高和大小
    });
  };

`new FileReader();` 是 JavaScript 中用于读取文件的一个构造函数。它创建了一个 `FileReader` 对象，能够异步读取本地文件的数据（如文本、图像等），将其以不同格式返回。
### 主要用途：
1. **异步读取文件**：可以从用户选择的文件中读取数据，而不会阻塞主线程。文件读取操作是异步的，即使文件很大，用户仍然可以继续与页面交互。
2. **支持多种格式**：`FileReader` 可以以多种格式读取文件，例如：
   - `readAsText(file)`：读取文件为文本。
   - `readAsDataURL(file)`：读取文件为 Data URL（如图像文件），可用于图像展示。
   - `readAsArrayBuffer(file)`：读取文件为 ArrayBuffer，用于处理二进制数据。
### 在代码中的使用：
在你的代码中，`new FileReader()` 被用来创建一个新的 `FileReader` 对象，以便读取用户上传的文件。接下来，你设置了 `onload` 事件处理程序，在文件读取完成后执行相关操作（例如创建一个 `Image` 对象来检查图像的尺寸）。
以下是一个简化的流程说明：
1. 用户选择文件（例如图像）。
2. 创建 `FileReader` 实例。
3. 使用 `reader.readAsDataURL(file)` 方法开始读取文件，该方法异步读取内容，并在完成后触发 `onload` 事件。
4. 在 `onload` 事件处理程序中，使用读取的结果（图像数据）进行尺寸检查。

  const beforeUpload = (file, type,width, height) => {
    console.log('file=======',file)
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('请上传正确的图片格式');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    const isLt300 = file.size / 1024 < 300;
    const isLt50 = file.size / 1024 < 50;
    if(type===1){
      // 限制图片像素宽高
      const width = 4836;
      const height = 3844;
      return new Promise((resolve, reject) => {
          let reader = new FileReader();
          console.log("reader===",reader)
          reader.addEventListener(
              'load',
              () => {
                  let img = new Image();
                  img.src = reader.result; 
                  img.onload = () => {
                      if (img.width < width || img.height < height) {
                          message.error('请上传宽高大于等于 4836*3844 的封面图！');
                          reject(new Error('请上传宽高大于等于 4836*3844 的封面图！'));
                          return;
                      } else {
                          resolve();
                      }
                  };
              },
          );
          reader.readAsDataURL(file);
      }).catch(() => {
        return false;
      })
    }
    if (type === 1 && !isLt2M) {
      message.error('图片大小不能超过2MB');
      return false
    }
    if ((type === 2 || type === 3 || type === 5) && !isLt300) {
      message.error('图片大小不能超过300KB');
      return false
    }
    if (type === 4 && !isLt50) {
      message.error('图片大小不能超过50KB');
      return false
    }
    const img = type === 1 && coverImage.length
    if (img) {
      message.error('只能上传一张图片');
    }
    const bg = type === 2 && backGroundImage.length
    if (bg) {
      message.error('只能上传一张图片');
    }
    const tt = type === 3 && topicImage.length
    if (tt) {
      message.error('只能上传一张图片');
    }
    const pi = type === 4 && prizeImage.length
    if (pi) {
      message.error('只能上传一张图片');
    }
    const sh = type === 5 && shareImage.length
    if (sh) {
      message.error('只能上传一张图片');
    }
    return isJpgOrPng && !img && !bg && !tt && !pi && !sh;
  }