### Ant Design Form 组件中实现 Upload 文件上传验证 在 Ant Design 的 `Form` 组件中集成 `Upload` 组件并实现文件上传验证，可以通过配置 `rules` 属性来指定验证规则。为了确保文件上传符合特定条件（如文件大小、类型），可以利用 `beforeUpload` 方法进行预处理。 #### 定义表单项规则 通过设置 `Form.Item` 的 `rules` 属性，能够定义详细的校验逻辑： ```javascript const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } }; <Form {...formItemLayout} onFinish={onFinish}> <Form.Item name="uploadFile" valuePropName="fileList" getValueFromEvent={normFile} rules={[ { required: true, message: '请选择要上传的文件!' }, // 必填项提示 ({ getFieldValue }) => ({ validator(_, value) { const files = getFieldValue('uploadFile'); if (files && files.some(file => !file.status || file.status === 'error')) { return Promise.reject(new Error('有未完成或失败的上传任务')); } return Promise.resolve(); } }) ]} > <Upload beforeUpload={(file) => checkFileSizeAndType(file)} onChange={handleChange} onRemove={handleRemove} multiple={true} action="/api/upload" // 假设这是服务器端接收文件的位置 > <Button> <UploadOutlined /> Click to Upload </Button> </Upload> </Form.Item> {/* 提交按钮 */} </Form>; ``` 上述代码片段展示了如何创建一个带有必选性和状态检查功能的文件上传字段[^1]。这里的关键在于使用了自定义验证器函数，在其中可以根据实际需求调整具体的验证标准。 #### 处理文件前的操作 对于每一个即将被上传的文件，可以在其真正发送之前执行一些必要的操作，比如检查文件尺寸是否超出限制或是确认文件格式是否允许等： ```javascript function checkFileSizeAndType(file){ const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png'; if (!isJPGorPNG) { message.error(`${file.name} 只能是 JPG 或 PNG 格式的图片!`); return false; } const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { message.error(`${file.name} 图片必须小于 2MB!`); return false; } return true; } ``` 这段 JavaScript 函数用于过滤不符合规定的文件，并给出相应的错误通知给用户[^3]。 #### 更新文件列表的状态管理 当文件发生变化时（例如新增加了一个待上传项目或者某个正在上传中的条目完成了传输过程），应当及时更新界面上显示的信息以及内部存储的数据结构： ```javascript function handleChange(info) { let fileList = [...info.fileList]; // 对于每一条记录只保留最近一次的结果 fileList = fileList.slice(-1); setFileList(fileList); } // 移除某一项时触发此事件处理器 function handleRemove(file) { const index = fileList.indexOf(file); const newFileList = fileList.slice(); newFileList.splice(index, 1); setFileList(newFileList); } ``` 这些辅助性的回调函数帮助维护着组件内关于已选择文件集合的一致性视图。