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 | - |
|