Fetch - это функция JavaScript, которая позволяет нам получать данные в нашу базу данных и из нее.

Эта операция отправки и получения объектов может занять значительное время, поэтому происходит асинхронно.

То есть интерпретатор выполняет HTTP-запрос и продолжает выполнение остальной части кода до получения ответа.

Иногда нам может потребоваться сначала отправить информацию в базу данных, чтобы получить наши данные.

И эта информация может включать идентификаторы продукта или пользователей, токены, индексы страниц и т. Д., Которые по большей части представлены просто в текстовом формате ...

Но что делать, если по какой-то причине вам нужно отправить файл изображения на серверную часть?

Во время разработки моего последнего проекта в школе Flatiron «Plantae» - идентификатор растений и справочное приложение, в котором пользователь фотографирует растения, чтобы получить подробную информацию о возможных совпадениях, я обнаружил, что вынужден делать именно это, Итак, сегодня я хочу поделиться с вами, как я сделал это всего за несколько шагов.

И даже если вы не знакомы с синтаксисом js fetch или как он работает, не беспокойтесь! потому что в этой статье мы рассмотрим сверху, как получить практически все, что угодно.

Наконец, мы увидим, как отправить это изображение через тело нашего запроса на выборку.

Прежде чем мы начнем, давайте кратко рассмотрим функцию fetch () в JavaScript.

Функция выборка:

fetch(pathToResource)

Это путь к ресурсу или API, к которому мы делаем запрос.

в нашем примере путь будет URL-адресом, который указывает на серверную часть plantae:

fetch("https://theplantaeapi.herokuapp.com/api/v1/id")

Затем мы получим ответ, который может быть запрошенными нами данными или любыми ошибками, которые могли произойти.

В любом случае наш ответ вернет то, что мы называем обещанием.

А Promise - это просто объект, который представляет возможное завершение (или сбой) асинхронной операции и ее результирующее значение.

Результирующее значение обещания будет формой необработанных данных, которые мы затем должны проанализировать определенным образом или вписать в формат, с которым мы можем работать, например форматы text, blob или json.

В нашем случае мы хотим преобразовать наш файл изображения в большой двоичный объект, чтобы затем отправить его через http-запрос.

Итак, давайте начнем с создания функции для преобразования нашего файла в читаемые данные!

Ниже я использую выражение функции стрелки, потому что с this легче работать в React, но вы можете свободно писать традиционную функцию, если хотите.

 setImagePath = e => {
}

В JavaScript есть объект FileReader (), который

позволяет веб-приложениям асинхронно считывать содержимое файлов (или буферов необработанных данных), хранящихся на компьютере пользователя, используя объекты File или« Blob для указания файла или данных для чтения.

Файловые объекты могут быть получены из объекта FileList, возвращенного в результате выбора пользователем файлов с помощью элемента <input>, из объекта DataTransfer операции перетаскивания или из mozGetAsFile() API на HTMLCanvasElement ». - Mozilla

Мы будем использовать его для чтения нашего файла изображения как данных с помощью:

setImagePath = e => {
  let reader = new FileReader()
}

Здесь мы создали новый экземпляр FileReader ().

Затем мы вызовем метод нашего читателя readAsDataURL (), который считывает содержимое указанного атрибута Blob has aresult, который будет содержать data: URL, представляющий данные файла.

setImagePath = e => {
  let reader = new FileReader() 
  reader.readAsDataURL(e.target.files[0])
}

Поскольку я загружал один файл изображения каждый раз, когда я жестко закодировал e.target.files [0].

Мы вызываем функцию onload (), которая является обработчиком события loadend, и сохраняем результат в состоянии:

setImagePath = e => {
  let reader = new FileReader() 
  reader.readAsDataURL(e.target.files[0])
  
  
  reader.onload = () => {      
   this.setState({        
    queryImage: reader.result      
   })    
 }
}

Теперь мы готовы отправить запрос на выборку!

А чтобы все работало, давайте создадим новый метод для отправки нашего запроса на выборку:

postImage = () => { 
  fetch("https://theplantaeapi.herokuapp.com/api/v1/id", {                      method: "POST",  
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(this.state.queryImage)
})
.then(res => res.json())
.then(data => {
       do stuff with data
     })      
   })
     
}

Обратите внимание, что я использую метод JSON. Stringify (), который преобразует объект или значение JavaScript в строку.

Теперь, когда у нас есть функция выборки, мы можем просто вызвать ее, установив путь к файлу в состоянии:

setImagePath = e => {
  let reader = new FileReader() 
  reader.readAsDataURL(e.target.files[0])
  
  
  reader.onload = () => {      
   this.setState({        
    queryImage: reader.result      
   },()=> this.postIdentification())    
 }
}

И альт!

Вскоре ваша серверная часть получит капля вашего изображения!

Надеюсь, это помогло, и если у вас есть другие способы отправки изображений для обработки в вашем бэкэнде с помощью fetch (), я хотел бы узнать о них, поэтому оставьте мне комментарий ниже или напишите мне! и не забудьте следить за обещаниями и fetch ()!