您现在的位置是：首页 >学无止境 >react antd upload组件的beforeupload限制网站首页学无止境

本次主要记录3种限制

• 图片尺寸
• 图片格式
• 图片宽高

容易出现的错误现象

• 正常报错，但是没有阻止图片上传

前期解释说明：

在 React 的 Ant Design (antd) 库中，beforeUpload 是一个用于在上传文件之前执行某些操作的钩子函数。它通常用于验证文件类型、大小，或在文件上传前进行一些预处理。beforeUpload 函数可以返回一个布尔值、一个 Promise 或者使用 async/await 语法。

为什么要用 Promise？

主要是异步操作：beforeUpload（本身是个同步函数） 可能需要执行异步操作，例如从服务器获取数据、读取文件内容等。使用 Promise 可以方便地处理这些异步操作。

用了Promise还是无法阻止上传

虽然我用了reject，报错正常出现，但是无法阻止上传，对于此现象，我的最终解决方法是，外层定义

 **let isPassUploadLimit = false;**

beforeUpload代码展示

const beforeUpload = (file: any) => {
       return new Promise((resolve, reject) => {
           let isJpgOrPng = file.name.endsWith(".png") || file.name.endsWith(".jpeg") || file.name.endsWith(".jpg");
           const isLt1M = file.size / 1024 / 1024 < 1;

           // 使用 FileReader 读取文件
           const reader = new FileReader();
           reader.readAsDataURL(file);  // 将文件读取为 Data URL

           reader.onload = (event:any) => {
               const img: any = new Image();
               img.src = event.target.result;
               
               img.onload = () => {
                   const height = img.height;
                   if (height > 160) {
                       notification.error({ key: "upadatable", message: "图片高度不超过160px", top: 60 });
                       reject("图片高度不超过160px");
                       return;
                   }
                   if (!isJpgOrPng) {
                       notification.error({ key: "upadatable", message: "仅支持支持png、jpeg、jpg格式文件", top: 60 });
                       reject("仅支持支持png、jpeg、jpg格式文件");
                       return;
                   } else if (!isLt1M) {
                       notification.error({ key: "upadatable", message: "最大不能超过1M", top: 60 });
                       reject("最大不能超过1M");
                       return;
                   }
                   resolve(true);
                   isPassUploadLimit = true;
               };
           }
       })
   };

在change函数中做如下判断即可

   const handleChange = (info: any) => {
       if (info.file.status === "uploading" || **!isPassUploadLimit**) {
           return;
       }
       if (info.file.status === "done") {
           // 写出你的逻辑
       }
   };

受时间限制，直接展示了代码供大家一起学习。