增加上传组件,对接注册字段

2025-06-30 14:16:17 +08:00
parent 8176a9b3d0
commit 662053b731
13 changed files with 720 additions and 340 deletions
--- a/src/components/FileUpload/README.md
+++ b/src/components/FileUpload/README.md
@ -0,0 +1,127 @@
+# FileUpload 文件上传组件
+
+基于Ant Design Upload组件封装的文件上传组件，支持文件类型和大小校验。
+
+## 组件特性
+
+- 支持文件类型校验
+- 支持文件大小限制
+- 支持拖拽上传
+- 支持上传多个文件
+- 支持国际化
+- 支持自定义提示信息
+- 支持表单受控模式
+
+## 使用示例
+
+### 基本使用
+
+```tsx
+import React from 'react';
+import { Form } from 'antd';
+import FileUpload from '@/components/FileUpload';
+
+const App: React.FC = () => {
+  const [form] = Form.useForm();
+
+  return (
+    <Form form={form}>
+      <Form.Item 
+        name="files" 
+        label="上传文件"
+        rules={[{ required: true, message: '请上传文件' }]}
+      >
+        <FileUpload maxSize={5} allowedTypes={['pdf', 'doc', 'docx']} />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default App;
+```
+
+### 拖拽上传
+
+```tsx
+import React from 'react';
+import { Form } from 'antd';
+import FileUpload from '@/components/FileUpload';
+import { useIntl } from 'umi';
+
+const App: React.FC = () => {
+  const [form] = Form.useForm();
+  const intl = useIntl();
+  
+  const fileTip = intl.formatMessage(
+    { id: 'component.fileUpload.fileTypeTip' },
+    { types: 'PDF, Word' }
+  );
+
+  return (
+    <Form form={form}>
+      <Form.Item 
+        name="files" 
+        label="上传文件"
+        rules={[{ required: true, message: '请上传文件' }]}
+      >
+        <FileUpload 
+          maxSize={10} 
+          allowedTypes={['pdf', 'doc', 'docx']} 
+          isDragger={true}
+          tip={fileTip}
+        />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default App;
+```
+
+### 图片上传
+
+```tsx
+import React from 'react';
+import { Form } from 'antd';
+import FileUpload from '@/components/FileUpload';
+
+const App: React.FC = () => {
+  const [form] = Form.useForm();
+
+  return (
+    <Form form={form}>
+      <Form.Item 
+        name="images" 
+        label="上传图片"
+        rules={[{ required: true, message: '请上传图片' }]}
+      >
+        <FileUpload 
+          maxSize={2} 
+          allowedTypes={['jpg', 'png']} 
+          listType="picture-card"
+          tip="支持jpg, png格式，大小不超过2MB"
+        />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default App;
+```
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 文件列表 | UploadFile[] | [] |
+| onChange | 文件列表改变时的回调 | (fileList: UploadFile[]) => void | - |
+| maxCount | 最大上传数量 | number | 1 |
+| maxSize | 文件大小限制（MB） | number | 5 |
+| allowedTypes | 允许的文件类型 | string[] | ['*'] |
+| listType | 上传列表的样式 | 'text' \| 'picture' \| 'picture-card' | 'text' |
+| buttonText | 上传按钮文字 | string | '上传文件' |
+| disabled | 是否禁用 | boolean | false |
+| accept | 接受的文件类型 | string | - |
+| showUploadList | 是否展示文件列表 | boolean \| { showPreviewIcon?: boolean; showRemoveIcon?: boolean; showDownloadIcon?: boolean } | true |
+| isDragger | 是否启用拖拽上传 | boolean | false |
+| tip | 提示文字 | string | - |