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

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

от steve , в категории: JavaScript , 8 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от johnpaul.blick , 8 месяцев назад

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