Как передать через fetch() на бекенд картинку?

Question

[Zenko]

Для предпросмотра картинок использую:

let image = document.getElementById('img')
image.src = window.URL.createObjectURL(input.files[0])

Как передать саму картинку желательно ассинхронным запросом на бекенд?
Знаю, можно динамически генерить форму из JS и вызвать submit, но такой вариант не желателен т.к. необходимо без перезагрузки страницы забросить картинки на сервер.
Есть смысл сгенерировать картинку в формате строки base64 и потом JSON-ом передавать на бекенд?

Comments

[n1ksON]

Только дополню уже существующий ответ:

Знаю, можно динамически генерить форму из JS и вызвать submit, но такой вариант не желателен т.к. необходимо без перезагрузки страницы забросить картинки на сервер.

Отменить перезагрузку страницы можно с помощью preventDefault()

Есть смысл сгенерировать картинку в формате строки base64 и потом JSON-ом передавать на бекенд?

Да

Answer 1

[Tim]

let data = new FormData();


data.append('file', input.files[0]);

const options = {
  method: 'POST',
  body: data	
}

const response = await fetch('url', options);
const res = await response.json();
console.log(res);

Comments

[Zenko]

Существует ли обратная функция URL.createObjectURL(), для преобразования ссылки на объект в объект Blob?

Answer 2

[Валерий Кулаков]

Есть смысл сгенерировать картинку в формате строки base64 и потом JSON-ом передавать на бекенд?

Думаю, смысл есть. Нужно знать контекст. Смотря что разрабатываете. Смотря что ожидает сервер. Смотря, как хранятся данные. Скажем, если у Вас RestFull API, и общение с сервером происходит на основе JSON, то я бы и картинку передавал в JSON, как Вы и написали. Если же это "доделка" к, скажем, WordPress, или другой CMS, и она ожидает именно картинку, то см. ответ Выше (Tim).