访问拖放文件-React JS

从您提供的代码片段来看，您使用的是一个基于React的文件上传组件，并且您已经成功实现了文件上传的功能。当文件上传状态变为"done"时，会显示成功提示。但是，您提到想要访问已删除或已上传的文件，这在当前代码中并未直接实现。

如果您希望在上传后能够查看或管理这些文件，您需要考虑以下几个方面：

1. 服务器端存储：确保您的服务器端（在这个例子中是mocky.io）正确接收并存储了上传的文件。action: "https://www.mocky.io/v2/5cc8019d300000980a055e76"指向的地址应该是一个可以处理文件上传并提供文件访问API的服务器。

2. 文件列表管理：在前端应用中维护一个文件列表，用于展示已上传文件的状态和提供访问链接。您可以在onChange事件处理函数中，不仅处理上传成功的提示，还将上传完成的文件信息保存到组件的state或者Redux等状态管理工具中。

3. 下载或预览功能：为每个列出的文件添加下载或在线预览的按钮。这通常涉及到从服务器获取文件的URL，并通过HTML的<a>标签或特定的预览组件来实现。

针对您的场景，您可以修改代码以保存上传文件的信息，并提供一个简单的方式来访问它们。下面是一个简化的示例，展示了如何在上传后将文件信息保存到state，并展示一个简单的文件列表：

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

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

  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.`);
      // 将上传成功的文件信息添加到state中的fileList
      this.setState({ fileList: info.fileList });
    } else if (status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  };

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

    const props = {
      name: 'file',
      multiple: false,
      action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      onChange: this.onChange,
    };

    return (
      <div>
        <Upload {...props}>
          <Button icon={<InboxOutlined />}>Click to Upload</Button>
        </Upload>
        {/* 展示已上传文件的列表 */}
        <div style={{ marginTop: '20px' }}>
          <h3>Uploaded Files:</h3>
          <ul>
            {fileList.map((file) => (
              <li key={file.uid}>
                <a href={file.response && file.response.url} target="_blank" rel="noopener noreferrer">
                  {file.name}
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
}

export default Section;

请注意，这个示例假设服务器响应（file.response）包含一个可以直接访问的文件URL。实际情况中，您可能需要根据您的服务器端逻辑调整这部分内容。此外，如果要支持文件删除，您还需要在前端添加删除操作，并在服务器端实现相应的删除API。