---
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` 组件。