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

Простое объяснение того, как загружать файлы на сервер с помощью Fetch API

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

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

Учитывая форму с полем ввода файла:

<input type="file" id="fileUpload" />

Прикрепляемchangeобработчик события на нем:

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

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

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) }) }

В этом примере мы отправляем POST в/saveImageконечная точка.

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

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

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

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: