antd 表单校验问题

### 使用 Ant Design 实现表单中的文件上传及校验 在构建基于 Ant Design 的 Web 应用程序时，处理文件上传并对其进行验证是一个常见的需求。为了满足这一功能，在 Ant Design 中提供了 `Upload` 组件用于文件的选择与提交，并且能够结合 `Form.Item` 来设置相应的规则来进行必要的校验。 #### 创建带有文件上传字段的表单项 下面展示了一个简单的例子，说明如何创建一个支持图片类型的文件上传控件，并对其添加基本的校验逻辑： ```jsx import React from 'react'; import { Form, Upload, message } from 'antd'; import { InboxOutlined } from '@ant-design/icons'; const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 18 } }; // 自定义校验函数 function checkFile(rule, value, callback) { const fileLimitSizeMB = 2; let isValidType = false; if (!value || !value.fileList.length) { return Promise.reject(new Error('请选择要上传的文件')); } // 检查文件大小不超过指定限制 for (let i = 0; i < value.fileList.length; ++i) { if (value.fileList[i].size / 1024 / 1024 > fileLimitSizeMB) { return Promise.reject( new Error(`文件大小不得超过 ${fileLimitSizeMB} MB`) ); } // 只允许特定格式的文件 if ( ['image/jpeg', 'image/png'].indexOf(value.fileList[i].type) !== -1 ) { isValidType = true; } } if (!isValidType) { return Promise.reject(new Error('仅限于 JPEG 或 PNG 图片格式')); } return Promise.resolve(); } class FileUploadDemo extends React.Component { render() { return ( <Form {...formItemLayout}> <Form.Item name="upload" rules={[{ validator: checkFile }]}> <Upload.Dragger> <p className="ant-upload-drag-icon"> <InboxOutlined /> </p> <p className="ant-upload-text">点击或将文件拖拽到这里</p> <p className="ant-upload-hint"> 支持JPEG/PNG格式，最大${fileLimitSizeMB}M. </p> </Upload.Dragger> </Form.Item> {/* 提交按钮 */} <Form.Item wrapperCol={{ offset: 6 }}> <Button type="primary" htmlType="submit"> 提交 </Button> </Form.Item> </Form> ); } } ``` 此代码片段展示了如何利用 `Upload.Dragger` 构建可拖放区域让用户选择文件[^1]。同时设置了自定义校验器 `checkFile()` 函数来确保所选文件符合预期条件——即只接受一定尺寸范围内的 JPG/JPEG 和 PNG 格式的图像文件[^4]。