React Antd Upload 组件的 beforeUpload 限制

概述

在使用 React 的 Ant Design (antd) 库时，beforeUpload 是一个常用的钩子函数，用于在上传文件之前执行某些操作。它通常用于验证文件类型、大小，或在文件上传前进行一些预处理。本文将介绍如何使用 beforeUpload 实现以下三种限制：

1. 图片尺寸
2. 图片格式
3. 图片宽高

常见问题

在使用 beforeUpload 时，可能会遇到以下问题：

• 正常报错，但无法阻止图片上传：即使 beforeUpload 返回了 reject，文件仍然会被上传。

解决方案

1. 使用 Promise 处理异步操作

beforeUpload 本身是一个同步函数，但在实际应用中，我们可能需要执行异步操作（例如读取文件内容或从服务器获取数据）。这时，可以使用 Promise 来处理这些异步操作。

2. 使用外部变量控制上传

即使使用了 Promise，有时仍然无法阻止文件上传。为了解决这个问题，可以通过定义一个外部变量 isPassUploadLimit 来控制上传行为。

代码实现

beforeUpload 函数

let isPassUploadLimit = false;

const beforeUpload = (file) => {
    return new Promise((resolve, reject) => {
        const 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) => {
            const img = 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;
            };
        };
    });
};

handleChange 函数

在 handleChange 函数中，通过判断 isPassUploadLimit 来控制文件上传行为：

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

总结

通过使用 Promise 和外部变量 isPassUploadLimit，我们可以在 beforeUpload 中实现文件上传前的多种限制，并确保在文件不符合条件时阻止上传。这种方法不仅适用于图片的尺寸、格式和宽高限制，还可以扩展到其他类型的文件验证。

希望本文对你理解和使用 beforeUpload 有所帮助！