safety-eval-service-frontend/.cursor/skills/specs/10-通用业务组件使用规范/04-文件上传组件/SKILL.md

name	description
jjb-file-uploader	定义 JJB 文件上传组件使用规范。在使用 FileUploader、getValueProps、getValueFromEvent 或 Form.Item 集成时使用。必须参考 MD/d.ts 文档。

通用业务组件使用规范

文件上传组件

⚠️ 重要约束：本章节所有组件必须严格参考 node_modules 中对应依赖包的 MD 文档或 d.ts 文件！不得猜测组件属性！

使用

import FileUploader, {
  getValueProps,
  getValueFromEvent,
} from '@cqsjjb/jjb-react-admin-component/FileUploader'

集成规范

同 ImageUploader，需配置 Form.Item 的数据转换钩子。

代码演示

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