В современных веб-приложениях возможность загружать файлы из Express API с помощью React.js является распространенным требованием. В этом руководстве мы рассмотрим несколько методов загрузки файлов в React.js путем взаимодействия с Express API. Мы предоставим примеры кода для каждого метода, чтобы обеспечить полное понимание процесса.

Метод 1: использование API «fetch».
API «fetch» — это встроенная функция JavaScript для выполнения HTTP-запросов. Мы можем использовать его для загрузки файлов из Express API в React.js. Вот пример:

fetch('/api/download', {
  method: 'GET',
})
  .then((response) => response.blob())
  .then((blob) => {
    const url = window.URL.createObjectURL(new Blob([blob]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'file.pdf');
    document.body.appendChild(link);
    link.click();
    link.parentNode.removeChild(link);
  })
  .catch((error) => {
    console.log('Error downloading file: ', error);
  });

Метод 2: использование библиотеки axios
Axios — это популярная клиентская библиотека HTTP, которая упрощает выполнение HTTP-запросов в JavaScript. Вот пример использования Axios для загрузки файла в React.js:

import axios from 'axios';
axios({
  url: '/api/download',
  method: 'GET',
  responseType: 'blob',
})
  .then((response) => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'file.pdf');
    document.body.appendChild(link);
    link.click();
    link.parentNode.removeChild(link);
  })
  .catch((error) => {
    console.log('Error downloading file: ', error);
  });

Метод 3. Использование тега привязки.
Другой простой подход — создать тег привязки с соответствующим URL-адресом загрузки. Вот пример:

render() {
  return (
    <a href="/api/download" download="file.pdf">
      Download File
    </a>
  );
}

В этом руководстве мы рассмотрели несколько способов загрузки файлов из Express API в React.js. Мы рассмотрели использование API «fetch», библиотеки «axios» и тега привязки. Каждый метод предоставляет уникальный способ загрузки файлов в React.js. В зависимости от требований вашего проекта вы можете выбрать наиболее подходящий подход.

Не забывайте соответствующим образом обрабатывать ошибки и крайние случаи и убедитесь, что конечная точка API на сервере Express правильно настроена для предоставления файла для загрузки. Приятного кодирования!