有两种使用此组件的方法。

• • 第一次**

当文件被选中时，组件会自动将此文件发送到端点，该端点已被设置为action属性 * 的值（当调用端点时，应该有一个服务器来获取和存储此文件）。* 在这种情况下，您通常应该为作为API发送到服务器的Restful请求设置标头（如Authorization标头）。

import { UploadOutlined } from '@ant-design/icons';
import { Button, message, Upload } from 'antd';
import { UploadChangeParam, UploadFile } from 'antd/es/upload';

function Test() {

  const uploadChanged = (event: UploadChangeParam<UploadFile<any>>) => {
    if (event.file.status !== 'uploading') {
      console.log(event.file, event.fileList);
    }
    if (event.file.status === 'done') {
      message.success(`${event.file.name} file uploaded successfully`);
    } else if (event.file.status === 'error') {
      message.error(`${event.file.name} file upload failed.`);
    }
  }

  return (
    <Upload
      name="file"
      action="https://EndPointForUploadingTheFile"
      headers={{
        authorization: 'the authorization token from the user',  //if needed
      }}
      accept=".xls, .xlsx"
      onChange={e => uploadChanged(e)}
    >
      <Button icon={<UploadOutlined />}>Click to Upload</Button>
    </Upload>
  );
}

请注意，在uploadChanged回调函数的帮助下，您可以检查文件是否已上载或正在上载，或者API是否已失败。

• • 第二次**

您希望停止自动文件上传API，并将上传的文件保存在一个状态中，直到您填写完表单，然后通过提交API将整个表单内容（包括这些文件）发送到服务器。您可以通过beforeUpload属性传递一个回调函数来完成此操作，该函数返回false，如下所示：

import { UploadOutlined } from '@ant-design/icons';
import { Button, Upload } from 'antd';
import { UploadChangeParam, UploadFile } from 'antd/es/upload';
import { useState } from 'react'

function Test() {

  const [files, setFiles] = useState<UploadFile<any>[]>([])

  const uploadChanged = (event: UploadChangeParam<UploadFile<any>>) => {
     setFiles(event.fileList);
  }

  const fileRemoved = (event: UploadFile<any>) => {
    const filteredFiles = files.filter(file => file !== event);
    setFiles(filteredFiles);    
  }

  return (
    <Upload
      name="file"
      showUploadList={{ showRemoveIcon: true }}
      accept=".xls, .xlsx"
      beforeUpload={() => false}
      onChange={e => uploadChanged(e)}
      onRemove={e => fileRemoved(e)}
    >
      <Button icon={<UploadOutlined />}>Click to Upload</Button>
    </Upload>
  );
}

• • 附言**：当Upload组件内容发生变化时，Upload中的上传文件列表以files状态存储（通过uploadChanged回调）。此外，当删除Upload中的某个文件时，fileRemoved回调从files状态中忽略该文件，以保持files和Upload内容相同。