antd 中的 Upload 和 Select结合

可以使用 Ant Design 中的 Upload 和 Select 组件结合起来实现上传文件并展示文件列表的功能。

首先，需要使用 Upload 组件实现文件上传功能。在 Upload 组件中，可以使用 beforeUpload 属性来控制上传的文件类型和大小。上传成功后，可以在 Upload 组件的 onChange 回调函数中获取到上传文件的信息，并将其保存到组件的状态中。

接着，可以使用 Select 组件来展示上传的文件列表。在 Select 组件中，可以使用 Option 组件来展示每个上传的文件的名称和下载链接。同时，也可以通过设置 Select 组件的 mode 属性为 multiple 来支持多选。

以下是一个示例代码：

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

const { Option } = Select;

class FileUploader extends React.Component {
  state = {
    fileList: [],
  };

  handleUpload = (info) => {
    let fileList = [...info.fileList];
    fileList = fileList.slice(-10); // 只展示最近上传的10个文件
    fileList = fileList.map(file => {
      if (file.response) {
        // 服务器返回的响应中包含了文件的下载链接
        file.link = file.response.link;
      }
      return file;
    });
    this.setState({ fileList });
  };

  render() {
    const { fileList } = this.state;

    return (
      <div>
        <Upload
          action="/upload"
          beforeUpload={(file) => {
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
            if (!isJpgOrPng) {
              message.error('只能上传 JPG/PNG 格式的图片！');
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
              message.error('文件大小不能超过 2MB！');
            }
            return isJpgOrPng && isLt2M;
          }}
          onChange={this.handleUpload}
          fileList={fileList}
        >
          <Button icon={<UploadOutlined />}>上传文件</Button>
        </Upload>
        <Select
          mode="multiple"
          style={{ width: '100%' }}
          placeholder="请选择要下载的文件"
        >
          {fileList.map(file => (
            <Option key={file.uid} value={file.link}>
              {file.name}
            </Option>
          ))}
        </Select>
      </div>
    );
  }
}

在上面的代码中，我们使用了 Upload 组件来上传文件，并在 onChange 回调函数中获取到上传文件的信息，并将其保存到组件的状态中。同时，我们也使用了 Select 组件来展示上传的文件列表，并通过设置 mode 属性为 multiple 来支持多选。在 Select 组件的 Option 中，我们展示了每个上传的文件的名称和下载链接。