antd中fileList的使用

antd中的fileList是用来展示上传文件列表的，可以通过设置fileList属性来控制显示的文件列表。例如，可以通过以下代码来设置fileList：

<Upload
  fileList={fileList}
  onChange={handleChange}
>
  <Button icon={<UploadOutlined />}>Click to Upload</Button>
</Upload>

其中，fileList是一个数组，每个元素代表一个上传的文件，包含文件的一些基本信息，如文件名、大小、类型等。handleChange是一个回调函数，用来处理上传文件的变化，例如添加、删除文件等操作。

相关问题

antd中fileList如何进行异步展示

antd中的fileList可以通过设置action属性来进行异步展示，具体实现方式如下：

1. 在组件中设置action属性，指定上传文件的接口地址。

2. 在上传文件成功后，将文件信息添加到fileList中。

3. 在组件中监听fileList的变化，当fileList发生变化时，重新渲染组件，实现异步展示。

示例代码如下：

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

class Avatar extends React.Component {
  state = {
    loading: false,
    imageUrl: '',
    fileList: [],
  };

  handleChange = ({ fileList }) => {
    this.setState({ fileList });
  };

  render() {
    const { loading, imageUrl, fileList } = this.state;
    const uploadButton = (
      <div>
        {loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div style={{ marginTop: 8 }}>上传</div>
      </div>
    );
    return (
      <Upload
        action="/api/upload"
        listType="picture-card"
        fileList={fileList}
        onChange={this.handleChange}
      >
        {fileList.length >= 1 ? null : uploadButton}
      </Upload>
    );
  }
}

在上面的示例代码中，我们通过设置action属性来指定上传文件的接口地址，然后在handleChange方法中将上传成功的文件信息添加到fileList中，最后在组件中监听fileList的变化，实现异步展示。

antd upload 清空 fileList

要清空 `fileList`，可以通过在 `Upload` 组件上设置 `fileList` 属性为一个空数组 `[]` 来实现。例如：

import React, { useState } from 'react';
import { Upload, Button } from 'antd';

const MyUpload = () => {
  const [fileList, setFileList] = useState([]);

  const handleUpload = () => {
    // 处理上传代码
  };

  const handleClear = () => {
    setFileList([]);
  };

  return (
    <div>
      <Upload fileList={fileList}>
        <Button>选择文件</Button>
      </Upload>
      <Button onClick={handleUpload}>上传</Button>
      <Button onClick={handleClear}>清空</Button>
    </div>
  );
};

export default MyUpload;

在上面的例子中，我们使用 `useState` 声明了一个 `fileList` 状态，并在 `Upload` 组件上设置了 `fileList` 属性。同时，我们还创建了两个按钮：一个用于上传文件，另一个用于清空 `fileList`。当点击清空按钮时，我们通过调用 `setFileList` 方法并传入一个空数组来清空 `fileList`。