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;
  }
相关推荐
techdashen8 小时前
12分钟讲解Python核心理念
开发语言·python
闭着眼睛学算法8 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
山海不说话8 小时前
Java后端面经(八股——Redis)
java·开发语言·redis
郝学胜-神的一滴8 小时前
谨慎地迭代函数所收到的参数 (Effective Python 第31条)
开发语言·python·程序人生·软件工程
烛阴8 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.8 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰8 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息8 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
大虾别跑9 小时前
vc无法启动
java·开发语言
郭老二9 小时前
【JAVA】从入门到放弃-01-HelloWorld
java·开发语言