如何在 ReactJS 中使用 axios 将一个或多个文件发送到 API？

假设您想使用Axios从前端（即React 应用程序）向服务器发送多个文件。为此，有两种方法，如下所示：

• 发送多个请求，同时在每个请求中附加一个文件。
• 发送单个请求，同时在该请求本身中附加多个文件。

我们将遵循第二种方法，这里有几点可以证明该行动的合理性：

1. 在第一种方法中，我们必须发出额外的请求以通过服务器发送多个文件，而在第二种方法中，我们只需发出一个请求。
2. 第一种方法会导致计算能力的浪费，如果您使用的是谷歌云平台（GCP）或亚马逊网络服务（AWS）等云服务提供商，它可能会增加额外的成本。
3. 第一种方法处理后端服务器的文件并不容易，而第二种方法更简单。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app multiple_files

第 2 步：使用以下命令移动到包含项目的目录：

cd multiple_files

第 3 步：使用以下命令安装axios模块：

npm install axios

第 4 步：使用以下命令启动服务器：

npm start

项目结构：这里是项目的目录结构：

项目结构

第二种方法的代码：

文件名：App.js

Javascript

import React from "react";
import axios from "axios";
  
class App extends React.Component {
  state = {
    files: null,
  };
  
  handleFile(e) {
    // Getting the files from the input
    let files = e.target.files;
    this.setState({ files });
  }
  
  handleUpload(e) {
    let files = this.state.files;
  
    let formData = new FormData();
  
    //Adding files to the formdata
    formData.append("image", files);
    formData.append("name", "Name");
  
    axios({
      // Endpoint to send files
      url: "http://localhost:8080/files",
      method: "POST",
      headers: {
        // Add any auth token here
        authorization: "your token comes here",
      },
      // Attaching the form data
      data: formData,
    })
      .then((res) => { }) // Handle the response from backend here
      .catch((err) => { }); // Catch errors if any
  }
  
  render() {
    return (
      

        
Select your files
         this.handleFile(e)}
        />
         this.handleUpload(e)}
        >Send Files
      
    );
  }
}
  
export default App;

输出：

Before clicking 'Send Files' Button:

选择多个文件的浏览器输出

要选择文件，请单击“选择文件”按钮并选择多个文件。选择所需文件后，单击发送文件按钮。

After clicking 'Send Files' Button:

发送带有文件的请求

您可以在上图中看到您选择的文件在发送到服务器时已成功以数据的形式附加。

注意：您可以在后端使用适当的包来处理这些文件，并可以相应地从服务器发送响应。