Скачивание файлов и изображений через Axios: 4 простых способа

Axios является одним из наиболее популярных HTTP-клиентов для JavaScript, использующимся для отправки запросов на сервер и получения ответов. При этом, он также позволяет загружать на ваш клиент (это ваш браузер в данном случае) файлы и изображения с удаленного сервера. Но как это сделать и какие методы для этого используются? В этой статье мы разберем четыре способа загрузки файлов и изображений через Axios.

1. Метод GET

Метод GET используется для получения данных с сервера, включая файлы и изображения. Для загрузки изображения, нам нужно использовать тег и его свойство src внутри. В следующем примере, мы загрузим изображение с URL-адреса https://unsplash.com/photos/iEJVyyevw-U/download?force=true.

import axios from 'axios';

axios({
  url: 'https://unsplash.com/photos/iEJVyyevw-U/download?force=true',
  method: 'GET',
  responseType: 'blob',
}).then((response) => {
  const imageUrl = window.URL.createObjectURL(new Blob([response.data]));
  const img = document.createElement('img');
  img.src = imageUrl;
  document.body.appendChild(img);
});

В этом примере, мы указываем Axios, что мы ожидаем ответ в виде blob. Это делается с помощью свойства responseType. После получения ответа, мы создаем объект URL и используем его для создания нового изображения, добавляемого к нашему DOM и отображаемого на странице.

2. Метод POST

Метод POST используется для отправки данных на сервер, но он также может использоваться для загрузки файлов на сервер. В этом случае, мы должны использовать объект FormData для каждого файла, который мы загружаем. В следующем примере, мы загрузим файл с путем /path/to/file.txt на сервер.

import axios from 'axios';

const file = new FormData();
file.append('file', '/path/to/file.txt');

axios.post('/upload-file', file, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
}).then((response) => {
  console.log(response.data);
});

В этом примере, мы создаем объект FormData и добавляем файл через метод append. Затем мы отправляем форму на сервер с типом multipart/form-data, указывая объект FormData в качестве данных для отправки. После успешной загрузки, сервер вернет ответ, который мы можем использовать для обработки.

3. Метод PUT

Метод PUT используется для обновления или создания ресурсов на сервере. Он также может использоваться для загрузки файлов на сервер. В этом случае, мы должны использовать объект FormData для каждого файла, который мы загружаем. В следующем примере, мы загрузим файл с путем /path/to/file.txt на сервер.

import axios from 'axios';

const file = new FormData();
file.append('file', '/path/to/file.txt');

axios.put('/upload-file', file, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
}).then((response) => {
  console.log(response.data);
});

В этом примере, мы создаем объект FormData и добавляем файл через метод append. Затем мы отправляем форму на сервер с типом multipart/form-data, указывая объект FormData в качестве данных для отправки. После успешной загрузки, сервер вернет ответ, который мы можем использовать для обработки.

4. Метод DELETE

Метод DELETE используется для удаления ресурсов на сервере. Он также может использоваться для удаления файлов с сервера. В этом случае, мы должны отправить запрос на сервер, указывая путь к файлу, который мы хотим удалить. В следующем примере, мы удалим файл с путем /path/to/file.txt на сервере.

import axios from 'axios';

axios.delete('/path/to/file.txt').then((response) => {
  console.log(response.data);
});

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

Заключение

В этой статье мы рассмотрели четыре простых способа загрузки файлов и изображений через Axios. Мы использовали методы GET, POST, PUT и DELETE для различных сценариев загрузки. Мы также использовали объект FormData для добавления файлов в форму для отправки через POST или PUT запросы. Каждый из этих методов может быть легко адаптирован под ваши индивидуальные нужды и может быть использован для загрузки файлов и изображений на сервер, а также для удаления и обновления на сервере.