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

Пользователь

от steve , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от johnpaul.blick , год назад

@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().

Пользователь

от jakayla , 3 месяца назад

@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-запрос и сохранять загруженное видео.