128 lines
3.0 KiB
Markdown
128 lines
3.0 KiB
Markdown
# 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 | - |
|