antdesignpro upload上传

Ant Design Pro 是一个开箱即用的企业级中后台前端/设计解决方案，提供了众多的组件和模板，方便开发者快速搭建中后台应用。

如果你想在Ant Design Pro中实现文件上传功能，可以使用Ant Design Pro自带的Upload组件。具体步骤如下：

1. 在你的项目中引入Ant Design Pro组件库。可以参考官方文档：https://pro.ant.design/docs/getting-started-cn。

2. 在你的代码中使用Upload组件。示例代码如下：

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

const { Dragger } = Upload;

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.`);
    }
  },
  onDrop(e) {
    console.log('Dropped files', e.dataTransfer.files);
  },
};

<Dragger {...props}>
  <p className="ant-upload-drag-icon">
    <InboxOutlined />
  </p>
  <p className="ant-upload-text">Click or drag file to this area to upload</p>
  <p className="ant-upload-hint">
    Support for a single or bulk upload. Strictly prohibit from uploading company data or other
    band files
  </p>
</Dragger>

在以上代码中，我们引入了Upload、message和InboxOutlined组件。其中，Upload是Ant Design Pro自带的上传组件，message可以用来弹出提示框，InboxOutlined是一个Ant Design Pro自带的图标组件。

我们使用Dragger组件包裹Upload组件，来实现文件拖拽上传的功能。我们在props中设置了上传文件的相关属性，包括上传接口、上传状态的回调函数等。最后，我们将Dragger组件渲染到页面上，来展示上传组件。

希望以上代码对你有所帮助！