reactjs 如何在react.js中使用ant design的上传组件(上传xls、xlsx文件)

v6ylcynt  于 2022-12-26  发布在  React
关注(0)|答案(1)|浏览(431)

我想使用ant design的上传组件,但是我不明白这个组件的 prop 是如何工作的。
我写了这段代码,但它不起作用

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

brgchamk

brgchamk1#

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

    • 第一次**

当文件被选中时,组件会自动将此文件发送到端点,该端点已被设置为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状态中忽略该文件,以保持filesUpload内容相同。

相关问题