¿Cómo enviar uno o más archivos a una API usando axios en ReactJS?

Suponiendo que desea enviar varios archivos desde el front-end, es decir, la aplicación React , al servidor mediante Axios. Para eso, hay dos enfoques como se muestra a continuación:

• Envíe múltiples requests adjuntando un solo archivo en cada solicitud.
• Envíe una sola solicitud mientras adjunta varios archivos en esa misma solicitud.

Vamos a seguir el segundo enfoque , y aquí hay algunos puntos para justificar la acción:

1. En el primer enfoque, tendremos que realizar requests adicionales para enviar varios archivos a través del servidor, mientras que, en el segundo enfoque, solo tendremos que realizar una solicitud.
2. El primer enfoque conducirá al desperdicio de potencia de cómputo y podría agregar costos adicionales si está utilizando proveedores de servicios en la nube como Google Cloud Platform (GCP) o Amazon Web Services (AWS).
3. El primer enfoque no es fácil de manejar los archivos del servidor back-end, mientras que el segundo enfoque es más simple.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app multiple_files

Paso 2: muévase al directorio que contiene el proyecto usando lo siguiente:

cd multiple_files

Paso 3: Instale el módulo axios usando el siguiente comando:

npm install axios

Paso 4: Inicie el servidor usando el siguiente comando:

npm start

Estructura del proyecto: Aquí está la estructura de directorios del proyecto:

Estructura del proyecto

Código para el segundo enfoque:

Nombre de archivo: App.js

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 (
      <div>
        <h1>Select your files</h1>
        <input
          type="file"
          multiple="multiple"  //To select multiple files
          onChange={(e) => this.handleFile(e)}
        />
        <button onClick={(e) => this.handleUpload(e)}
        >Send Files</button>
      </div>
    );
  }
}
  
export default App;

Producción: 

Before clicking 'Send Files' Button:

Salida del navegador con varios archivos seleccionados

Para elegir archivos, haga clic en el botón Elegir archivos y seleccione varios archivos. Después de elegir los archivos necesarios, haga clic en el botón Enviar archivos .

After clicking 'Send Files' Button:

Envío de una solicitud con los archivos

Puede ver en la foto de arriba que los archivos que ha seleccionado se han adjuntado con éxito en forma de datos mientras se envían al servidor. 

Nota: puede usar paquetes apropiados en el backend para manejar estos archivos y puede enviar la respuesta del servidor en consecuencia.