<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 中用于讀取文件的一個構(gòu)造函數(shù)。它創(chuàng)建了一個 `FileReader` 對象，能夠異步讀取本地文件的數(shù)據(jù)（如文本、圖像等），將其以不同格式返回。
### 主要用途：
1. **異步讀取文件**：可以從用戶選擇的文件中讀取數(shù)據(jù)，而不會阻塞主線程。文件讀取操作是異步的，即使文件很大，用戶仍然可以繼續(xù)與頁面交互。
2. **支持多種格式**：`FileReader` 可以以多種格式讀取文件，例如：
   - `readAsText(file)`：讀取文件為文本。
   - `readAsDataURL(file)`：讀取文件為 Data URL（如圖像文件），可用于圖像展示。
   - `readAsArrayBuffer(file)`：讀取文件為 ArrayBuffer，用于處理二進(jìn)制數(shù)據(jù)。
### 在代碼中的使用：
在你的代碼中，`new FileReader()` 被用來創(chuàng)建一個新的 `FileReader` 對象，以便讀取用戶上傳的文件。接下來，你設(shè)置了 `onload` 事件處理程序，在文件讀取完成后執(zhí)行相關(guān)操作（例如創(chuàng)建一個 `Image` 對象來檢查圖像的尺寸）。
以下是一個簡化的流程說明：
1. 用戶選擇文件（例如圖像）。
2. 創(chuàng)建 `FileReader` 實(shí)例。
3. 使用 `reader.readAsDataURL(file)` 方法開始讀取文件，該方法異步讀取內(nèi)容，并在完成后觸發(fā) `onload` 事件。
4. 在 `onload` 事件處理程序中，使用讀取的結(jié)果（圖像數(shù)據(jù)）進(jìn)行尺寸檢查。

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