72 lines
4.5 KiB
Markdown
72 lines
4.5 KiB
Markdown
|
---
|
|||
|
|
name: jjb-file-uploader
|
|||
|
|
description: 定义 JJB 文件上传组件使用规范。在使用 FileUploader、getValueProps、getValueFromEvent 或 Form.Item 集成时使用。必须参考 MD/d.ts 文档。
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 通用业务组件使用规范
|
|||
|
|
|
|||
|
|
## 文件上传组件
|
|||
|
|
|
|||
|
|
> **⚠️ 重要约束**：本章节所有组件必须严格参考 node_modules 中对应依赖包的 MD 文档或 d.ts 文件！不得猜测组件属性！
|
|||
|
|
|
|||
|
|
## 使用
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import FileUploader, {
|
|||
|
|
getValueProps,
|
|||
|
|
getValueFromEvent,
|
|||
|
|
} from '@cqsjjb/jjb-react-admin-component/FileUploader'
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 集成规范
|
|||
|
|
|
|||
|
|
同 `ImageUploader`，需配置 `Form.Item` 的数据转换钩子。
|
|||
|
|
|
|||
|
|
## 代码演示
|
|||
|
|
|
|||
|
|
```jsx
|
|||
|
|
import { useState } from 'react';
|
|||
|
|
import { Button, Form } from 'antd';
|
|||
|
|
import FileUploader, { getValueProps, getValueFromEvent } from '@cqsjjb/jjb-react-admin-component/FileUploader';
|
|||
|
|
|
|||
|
|
function App() {
|
|||
|
|
const [ form ] = Form.useForm();
|
|||
|
|
return (
|
|||
|
|
<Form>
|
|||
|
|
<Form.Item
|
|||
|
|
label="上传附件"
|
|||
|
|
name="imageUrl"
|
|||
|
|
getValueProps={getValueProps}
|
|||
|
|
getValueFromEvent={getValueFromEvent}
|
|||
|
|
>
|
|||
|
|
<FileUploader action={`${window.process.env.app.API_HOST}/attachment/files/upload-speed-simple`} />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Form>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## API
|
|||
|
|
|
|||
|
|
| 属性 | 说明 | 类型 | 默认值 |
|
|||
|
|
|----------------------------|:---------------------------------------------------------------------|:----------------------------------------|:----|
|
|||
|
|
| size | 文件大小，单位：KB | `number` | 5120 |
|
|||
|
|
| buttonProps | 组件内部按钮属性 参考 https://ant-design.antgroup.com/components/button-cn#api | `ButtonProps` | - |
|
|||
|
|
| data | 额外的数据 | `Record<string, any>` | - |
|
|||
|
|
| value | 值，受控 | `any` | - |
|
|||
|
|
| accept | 上传类型 参考`MIME`类型 | `string` | * |
|
|||
|
|
| action | 上传地址 | `string` | - |
|
|||
|
|
| preview | 是否支持预览 | `boolean` | false |
|
|||
|
|
| headers | 请求头 | `Record<string, any>` | - |
|
|||
|
|
| maxCount | 最多上传数，`multiple`为`true`有效 | `number` | 99 |
|
|||
|
|
| multiple | 上传多个文件 | `boolean` | false |
|
|||
|
|
| disabled | 是否禁用 | `boolean` | false |
|
|||
|
|
| fieldName | 上传文件的字段名 | `string` | file |
|
|||
|
|
| showDelete | 显示删除图标 | `boolean` | true |
|
|||
|
|
| customRequest | 自定义请求 | `(res: AxiosResponse) => void` | - |
|
|||
|
|
| onChange | 受控值改变回调 | `(value: any) => void` | - |
|
|||
|
|
| onBeforeUploadVerifySize | 上传前验证文件大小 | `(fileSize: number, maxSize: number) => Promise<void>` | - |
|
|||
|
|
| onBeforeUploadVerifyAccept | 上传前验证文件类型 | `(fileType: string, accept: string) => Promise<void>` | - |
|
|||
|
|
|
|||
|
|
> **注意**：这个组件的 `multiple` 仅为可以上传多个文件，但不是支持选择多个文件，若要上传选择多个文件，建议使用 `antd/Upload` 组件。
|