Как отправить один или несколько файлов в API с помощью axios в ReactJS?

Опубликовано: 7 Августа, 2021

Предполагая, что вы хотите отправить несколько файлов из внешнего интерфейса, то есть приложения React , на сервер с помощью Axios. Для этого есть два подхода, как показано ниже:

Отправляйте несколько запросов, прикрепляя один файл к каждому запросу.
Отправьте один запрос, прикрепив несколько файлов к самому запросу.

Мы собираемся следовать второму подходу , и вот несколько моментов, чтобы оправдать действие:

В первом подходе нам придется делать дополнительные запросы для отправки нескольких файлов через сервер, тогда как во втором подходе нам нужно будет сделать только один запрос.
Первый подход приведет к бесполезной трате вычислительной мощности и может привести к дополнительным расходам, если вы используете поставщиков облачных услуг, таких как Google Cloud Platform (GCP) или Amazon Web Services (AWS).
В первом подходе нелегко обрабатывать файлы внутреннего сервера, тогда как во втором подходе проще.

Создание приложения React:

Шаг 1. Создайте приложение React, используя следующую команду:

 npx создать-реагировать-приложение несколько_файлов

Шаг 2: перейдите в каталог, содержащий проект, используя следующее:

cd multiple_files

Шаг 3: Установите модуль axios, используя следующую команду:

 npm установить axios

Шаг 4: Запустите сервер с помощью следующей команды:

 npm start

Структура проекта: Вот структура каталогов проекта:

Структура проекта

Код для 2-го подхода:

Имя файла: 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 (
      <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 App; default 

Выход:

 Перед тем, как нажать кнопку «Отправить файлы»:

Вывод браузера с несколькими выбранными файлами

Чтобы выбрать файлы, нажмите кнопку « Выбрать файлы» и выберите несколько файлов. После выбора необходимых файлов нажмите кнопку « Отправить файлы» .

 После нажатия кнопки «Отправить файлы»:

Отправка запроса с файлами

На фотографии выше видно, что выбранные вами файлы были успешно прикреплены в виде данных при отправке на сервер.

Примечание. Вы можете использовать соответствующие пакеты в серверной части для обработки этих файлов и соответственно отправлять ответ с сервера.

JavaScript Picked

Как отправить один или несколько файлов в API с помощью axios в ReactJS?

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ