ant design pro react文件上传

Ant Design Pro提供了一个Upload组件，可以方便地实现文件上传功能。以下是使用React实现文件上传的示例代码：

import { Upload, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

const FileUpload = () => {
  const props = {
    name: 'file',
    action: '/api/upload',
    headers: {
      authorization: 'Bearer ' + localStorage.getItem('token'),
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功！`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败！`);
      }
    },
  };

  return (
    <Upload {...props}>
      <Button icon={<UploadOutlined />}>上传文件</Button>
    </Upload>
  );
};

export default FileUpload;

在上述代码中，我们使用了Ant Design Pro中的Upload组件，通过props属性设置了上传文件的相关信息。其中，name属性指定了上传文件的参数名，action属性指定了上传文件的URL地址，headers属性指定了请求头，onChange事件处理函数用于处理上传文件的状态和结果。

我们可以将该组件引入到其他需要文件上传功能的组件中使用。例如：

import FileUpload from './FileUpload';

const MyComponent = () => {
  return (
    <div>
      <h1>文件上传示例</h1>
      <FileUpload />
    </div>
  );
};

export default MyComponent;