react.js中ant design的上传组件（上传xls、xlsx文件）的使用方法

Question

I want to use the upload component of ant design, but I don't understand how the props of this component work.

I wrote this code, but it doesn't work

<Upload name="file" accept=".xls, .xlsx">
 <Button icon={<UploadOutlined/>}>Click to upload</Button>
</Upload>

Answer 1

There are two ways of using this component.

---

First

When the file is selected, the component automatically sends this file to the endpoint has been set as the value of action property (There should be a server to get and store this file when the endpoint is called). In this situation you often should set headers (like Authorization header) for the Restful request that is being sent to the server as an API.

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>
  );
}

Notice that, with the help of uploadChanged callback function, you can check whether the file was uploaded or is being uploaded or the API has been failed.

---

Second

You want to stop the automatic file uploader API, and store the uploaded files in a state until the form you are filling out is finished. Then send the whole form content (including these files) via the submit API to the server. You can do it by passing a callback which returns false through beforeUpload property like so:

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>
  );
}

PS : When the Upload component content is changed, the list of the uploaded files in Upload is stored in files state (by uploadChanged callback). Also when one of the files in Upload is removed, fileRemoved callback omits that file from the files state to keep the files and Upload content the same.