fe_portal_frontend/src/components/FileUpload/README.md

FileUpload 文件上传组件

基于Ant Design Upload组件封装的文件上传组件，支持文件类型和大小校验。

组件特性

• 支持文件类型校验
• 支持文件大小限制
• 支持拖拽上传
• 支持上传多个文件
• 支持国际化
• 支持自定义提示信息
• 支持表单受控模式

使用示例

基本使用

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;

拖拽上传

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;

图片上传

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	-