antdesignpro Upload

Ant Design Pro 是一个企业级后台管理系统的前端解决方案，提供了很多常用的组件和模板，帮助开发者快速搭建出美观、易用的后台管理系统。

在 Ant Design Pro 中，上传文件可以通过使用 Upload 组件来实现。使用 Upload 组件需要先安装 antd 组件库，然后在需要使用的组件中引入 Upload 组件。具体代码示例如下：

import { Upload, message } from 'antd';
import { InboxOutlined } from '@ant-design/icons';

const { Dragger } = Upload;

const UploadComponent = () => {
  const props = {
    name: 'file',
    multiple: true,
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    onChange(info) {
      const { status } = info.file;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };

  return (
    <Dragger {...props}>
      <p className="ant-upload-drag-icon">
        <InboxOutlined />
      </p>
      <p className="ant-upload-text">点击或拖拽文件到这里上传</p>
      <p className="ant-upload-hint">
        支持单个或批量上传。严禁上传公司数据或其他带有敏感信息的文件。
      </p>
    </Dragger>
  );
};

export default UploadComponent;

在以上代码中，我们使用了 Upload 组件的 Dragger 子组件，来实现文件拖拽上传的功能。同时，我们也可以通过设置 props 中的参数来控制上传文件的类型、大小、数量等。上传完成后，我们可以通过监听 onChange 事件来处理上传成功或失败的逻辑，并使用 message 组件来给用户反馈。