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(); new Image();

获取图片上传的像素宽高

AI解释

复制代码
`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;
  }
相关推荐
RadiumAg9 分钟前
记一道有趣的面试题
前端·javascript
yangzhi_emo13 分钟前
ES6笔记2
开发语言·前端·javascript
yanlele29 分钟前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
emplace_back1 小时前
C# 集合表达式和展开运算符 (..) 详解
开发语言·windows·c#
jz_ddk1 小时前
[学习] C语言数学库函数背后的故事:`double erf(double x)`
c语言·开发语言·学习
萧曵 丶1 小时前
Rust 所有权系统:深入浅出指南
开发语言·后端·rust
xiaolang_8616_wjl1 小时前
c++文字游戏_闯关打怪2.0(开源)
开发语言·c++·开源
收破烂的小熊猫~2 小时前
《Java修仙传:从凡胎到码帝》第四章:设计模式破万法
java·开发语言·设计模式
中微子2 小时前
React状态管理最佳实践
前端