Как загрузить файл с помощью Fetch

Есть задача, которая должна быть простой, но иногда это приводит к многочасовым исследованиям в Интернете: загрузка файлов на сервер.

В этом уроке я объясню вам, как это сделать с помощью fetch.

Дана форма с полем ввода файла:

Мы прикрепляем к нему обработчик событий изменить :

document.querySelector('#fileUpload').addEventListener('change', event => {
  handleImageUpload(event)
})

и мы управляем основной частью нашей логики в функции обрабатывать загрузку изображений() :

const handleImageUpload = event => {
  const files = event.target.files
  const formData = new FormData()
  formData.append('myFile', files[0])

  fetch('/saveImage', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log(data)
  })
  .catch(error => {
    console.error(error)
  })
}

В этом примере мы ОТПРАВЛЯЕМ СООБЩЕНИЕ в конечную точку /сохранить изображение .

Мы инициализируем новый объект FormData и присваиваем его переменной FormData , и добавляем туда загруженный файл. Если у нас есть более одного элемента ввода файла, у нас будет более одного вызова append() .

Переменная data внутри второго then() будет содержать возвращаемые данные, проанализированные в формате JSON. Я предполагаю, что ваш сервер выдаст вам JSON в качестве ответа.

Как обрабатывать изображения, загруженные на стороне сервера, – это другая тема, о которой я напишу завтра.

Оригинал: “https://flaviocopes.com/how-to-upload-files-fetch/”