解决antd Upload组件表单校验失效问题

1. 问题背景与现象描述

上周在重构后台管理系统时，遇到了一个诡异的表单校验问题：当使用antd的Upload组件配合Form.Item进行文件上传时，required校验规则在某些情况下会失效。具体表现为：

1. 首次上传文件后删除，表单仍显示校验通过
2. 切换不同文件时，校验状态没有实时更新
3. 在Modal中使用时，关闭后重新打开会残留上次的校验状态

这个问题直接影响了我们的订单导入功能——用户可能误以为已上传文件而提交空数据。经过两天深度排查，终于找到了根本原因和解决方案。下面分享完整的排查思路和修复方案。

2. 组件基础用法分析

2.1 标准实现方式

先看一个典型的Upload+Form组合实现：

jsx复制<Form.Item
  name="file"
  label="合同文件"
  rules={[{ required: true, message: '请上传合同文件' }]}
>
  <Upload 
    beforeUpload={() => false}
    maxCount={1}
  >
    <Button icon={<UploadOutlined />}>点击上传</Button>
  </Upload>
</Form.Item>

2.2 预期行为逻辑

按照antd的设计预期，这个组合应该实现：

• 当没有文件时显示校验错误
• 上传文件后校验通过
• 删除文件后重新显示错误

但实际表现与预期存在差异，特别是在动态表单和弹窗场景下。

3. 问题根因深度剖析

3.1 校验机制冲突

通过阅读源码和调试发现，问题核心在于：

1. Form.Item通过valuePropName(默认"value")收集子组件值
2. Upload组件内部状态管理独立于表单体系
3. 文件删除操作没有触发Form的onFieldsChange事件

3.2 生命周期问题

在Modal场景下，组件卸载时：

• Upload内部状态被重置
• 但Form保留了旧的校验状态
• 再次打开时两者状态不同步

4. 完整解决方案

4.1 方案一：受控模式（推荐）

jsx复制const [fileList, setFileList] =