Как загрузить видео с помощью multipart/form-data и axios?

@steve 

Для загрузки видео с помощью multipart/form-data и axios, вам нужно выполнить следующие шаги:

1. Создайте экземпляр объекта FormData и добавьте файл видео в этот объект:

1
2

const formData = new FormData();
formData.append('video', videoFile);

Здесь video - это имя поля, используемое на сервере для получения файла видео, а videoFile - это объект файла, который вы хотите загрузить.

1. Создайте объект настроек config для запроса axios, включая заголовок Content-Type:

1
2
3
4
5

const config = {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
};

1. Выполните POST-запрос с помощью axios и передайте объект FormData и config в качестве параметров:

1
2
3
4
5
6
7

axios.post('/upload-video', formData, config)
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

Здесь /upload-video - это URL-адрес, на который вы хотите отправить запрос на загрузку видео.

Полный код может выглядеть так:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

const formData = new FormData();
formData.append('video', videoFile);

const config = {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
};

axios.post('/upload-video', formData, config)
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

Обратите внимание, что videoFile должен быть объектом типа File, полученным из элемента <input type="file"> или с помощью метода fetch().

@steve 

Убедитесь, что у вас есть доступ к модулю axios. Если его у вас нет, установите его с помощью команды npm install axios или yarn add axios.

Пример кода для загрузки видео с помощью multipart/form-data и axios:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

const axios = require('axios'); // импортировать модуль axios

// Функция для загрузки видео
async function uploadVideo() {
  const videoFile = document.getElementById('video-input').files[0]; // получение файла видео из элемента input
  const formData = new FormData(); // создание экземпляра FormData
  formData.append('video', videoFile); // добавление файла видео в объект FormData

  const config = {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  };

  try {
    const response = await axios.post('/upload', formData, config); // выполнение POST-запроса с помощью axios
    console.log(response.data); // вывод данных ответа на консоль
  } catch (error) {
    console.error(error); // вывод ошибки на консоль
  }
}

// Вызов функции для загрузки видео
uploadVideo();

В приведенном примере кода сначала мы получаем выбранный файл видео из элемента input с помощью document.getElementById('video-input').files[0]. Затем мы создаем экземпляр FormData и добавляем файл видео в объект FormData с помощью метода append. Мы также создаем объект настроек config с заголовком Content-Type, указывающим тип данных в запросе.

Затем мы используем метод axios.post для выполнения POST-запроса на сервер. В качестве параметров мы передаем URL-адрес, объект FormData и объект настроек config. Мы используем async/await для выполнения асинхронного запроса и обрабатываем успешный и неуспешный результат с помощью блока try/catch. В случае успешного выполнения запроса мы выводим данные ответа на консоль, а в случае ошибки выводим ошибку на консоль.

Убедитесь, что у вас есть серверная сторона, которая будет обрабатывать этот POST-запрос и сохранять загруженное видео.