Как передать картинку на бэк как бинарный файл?

Question

[uRoot]

На фронте юзается React, react-dropzone и react-final-form -- чисто для справки.

Что-то у меня всё никак не получается оправить из инпута файл на бэк как бинарный файл:

Как это должно выглядеть в консоли:

Сам файл я получаю через new FileReader()
Я пробую преобразовать содержимое:

let blob = new Blob(fileReader.result, {type: 'image/jpeg'});

Но вижу ошибку:

TypeError: Failed to construct 'Blob': The provided value cannot be converted to a sequence

Как мне содержимое конвентировать/преобразовать в бинарный файл?

UPD:
Получается вот содержимое таргета. Видно сам файл:

spoiler

Если я result отправляю на бэк. То тов. бэкендер жалуется, что я эму отправляю строку с содержимым файла, а не сам файл.

Comments

[Rerurk]

Через filelist как вариант не пройдет?

[uRoot]

Rerurk, Я пока не знаю. :)

Answer 1

[zkrvndm]

Пример отправки файла, чтобы было как у вас на скриншоте:

async function sendFile() {
	
	// Берём из поля выбора файлов самый первый файл за номером 0:
	var file = document.querySelector('input[type="file"]').files[0];
	
	// Создаем форму конструктором:
	var form_data = new FormData();
	
	// Добавляем в форму наш файл из поля:
	form_data.append('image', file, file.name);
	
	// Добавляем остальные данные:
	
	form_data.append('title', 'www');
	form_data.append('body', 'ghghghghgh');
	form_data.append('tag', '123456');
	form_data.append('lang', 'ru');
	form_data.append('published_at', '2020-01-01 20:00:00');
	
	// Отправляем форму на сервер (замените адрес обработчика на свой):
	
	var response = await (await fetch('https://nadim.work/test.php', {
		method: 'POST',
		body: form_data
	})).text();
	
	// Выводим ответ сервера в консоли:
	
	console.log("Ответ сервера: " + response);
	
	return response;
	
}

Вызывайте функцию sendFile() и смотрите результат.

Comments

[uRoot]

Обновил стартовый пост. Чекните плиз

[zkrvndm]

uRoot, я вам завтра распишу, как отправить файл, чтобы было точно, как показано в консоли) Сейчас я не за компом и уже собираюсь спать.

[zkrvndm]

uRoot, обновил свой ответ, пробуйте.

Answer 2

[Alexandroppolus]

FileReader тут не нужен.
Не надо читать содержимое файла, чтобы потом сотворить из него блоб. Просто отправляй исходный файл.

Comments

[uRoot]

FileReader тут используется для фронтовых вещей. Поэтому хотелось бы через него. Но у меня ошибка

[uRoot]

Получается вот содержимое ивента. Видно сам файл. Если я result отправляю на бэк. То тов. бэкендер жалуется, что я эму отправляю строку с содержимым файла, а не сам файл.

[Alexandroppolus]

uRoot,

содержимое конвентировать/преобразовать в бинарный файл

По твоему, исходный файл - это не бинарный файл?

[uRoot]

Alexandroppolus, обновил стартовый пост. Прочитайте плиз, чтобы глубже понять суть проблемы :)

[Alexandroppolus]

uRoot,

handleChange(event) {
  fetch(url, {
    body: event.target.files[0],
    method: 'POST',
    headers: {
      'Content-Type': '...',
    },
  });
}

вот примерно так

[Rerurk]

uRoot, разница то какая ? Файл загребается из input я так понял? Так считай его через filelist, и как выше сказали через форм fomData или fetch ем или еще чем нить пульни

[uRoot]

Alexandroppolus, ну у нас сейчас 'Content-Type': 'multipart/form-data', пробовали так:

'Content-Type': 'multipart/form-data; boundary="boundary"'.

Пока результата нет.

[Alexandroppolus]

uRoot, так что на самом деле ожидает бэк? Только файл, или форму с файлом? Надо бы определиться.

Если только файл, то отправляешь в fetch как есть files[0] из файлового инпута.
Если форма, то берешь FormData, докидываешь туда файл и если нужно ещё что-то, потом надо отправить в fetch это самое FormData.

[Rerurk]

uRoot, тута

[uRoot]

Alexandroppolus,

так что на самом деле ожидает бэк? Только файл, или форму с файлом?

Форму с файлом. Для общения с бэком юзаем axios. Форма уходит. С данными и всё ок.

Но бэк жалуется, что я эму отдаю строку с содержимым файла, а не сам файл. И просит его передавать в бинарном виде, то есть сам файл. Я уже пробовал отдавать files[0] из файлового инпута. Но всё также. Не понятно чей косяк :D

[Alexandroppolus]

const data = new FormData();
data.append('file', fileInput.files[0]);

fetch(url, {
    body: data,
    method: 'POST',
    headers: {
      'Content-Type': '...',
    },
  });

так не работает?

[Rerurk]

uRoot, а вы уверены что бэк корректно все считывает?

[uRoot]

Rerurk, нет. Но бэк говорит, что ошибка на фронте т.к. через Постман (или его аналог, судя по скрину) всё работает.