如何在Antd Upload组件中抛出错误提示并阻止表单提交？

你当前的代码存在两个核心问题：beforeUpload的逻辑判断写反了，且未关联表单校验状态，导致无法阻止表单提交和正确显示错误提示。以下是修正后的完整实现：

关键修改点 #

• 修正beforeUpload的大小判断逻辑，超出限制时触发错误提示并返回false阻止上传
• 通过表单实例的setFields方法手动设置字段错误状态，让表单校验不通过从而阻止提交
• 上传符合要求的图片时清除字段错误状态，恢复表单正常校验

完整代码示例 #

import { Form, Upload, Button, Space, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

// 确保已通过useForm获取表单实例并关联到Form组件
const [form] = Form.useForm();

// ...其他组件逻辑

<Form form={form}>
  <Form.Item
    name={`messageImage${broadcastSession}`}
    rules={[
      {
        required: true,
        message: "请上传图片",
      },
    ]}
    hasFeedback
  >
    <Upload
      beforeUpload={(uploadedImage) => {
        const maxSize = 5 * 1024 * 1024; // 5MB对应的字节数
        const isOverSize = uploadedImage.size > maxSize;
        
        if (isOverSize) {
          message.error('请上传小于5MB的图片');
          // 设置表单字段错误，触发校验失败
          form.setFields([{
            name: `messageImage${broadcastSession}`,
            errors: ['请上传小于5MB的图片']
          }]);
          return false; // 阻止文件上传
        }
        
        // 上传合法图片时清除之前的错误状态
        form.setFields([{
          name: `messageImage${broadcastSession}`,
          errors: []
        }]);
        return true;
      }}
      showUploadList={false}
      listType="picture"
      maxCount={1}
      accept=".jpg, .jpeg, .png"
      onChange={handleImageUpload}
    >
      <Space>
        <Button icon={<UploadOutlined />}>
          选择图片
        </Button>
      </Space>
    </Upload>
  </Form.Item>
</Form>

补充说明 #

• 必须将获取到的表单实例通过form属性绑定到<Form>组件上，否则setFields方法无法生效
• 如果handleImageUpload中有处理上传成功的逻辑，建议也添加清除字段错误的代码，避免残留错误提示
• 表单提交时会自动校验所有字段状态，由于我们手动设置了错误标记，校验会失败从而阻止提交

内容的提问来源于stack exchange，提问作者Nandha