Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   отправить несколько файлов формате base64 data:image - Кропирование (https://javascript.ru/forum/dom-window/78573-otpravit-neskolko-fajjlov-formate-base64-data-image-kropirovanie.html)

тоша 06.10.2019 01:18

отправить несколько файлов формате base64 data:image - Кропирование
 
Есть форма-анкета, поля с загрузкой фото 5шт, после чего добавлена функция кропирование(обрезка фото Crop.js) пользователь выбирает область на фото и загружает,образное фото отображается рядом с полем, формате base64 data:image
и преобразовывается в blob, добавляется formData и отправляется POST

Проблема в том, что фото отправляется только одно а не 5шт, не могу понять как в formData добавить остальные 4шт и отправить общим запросом, это надо создать 5 blob-ов? и из function() вытаскивать их в один POST запрос?

основная задача отправить base64 data:image POST запросом, другого решения не нашел только через blob
(avatar.src = "base64 data:image........")
avatar.src = canvas.toDataURL();

canvas.toBlob(function (blob) { 
var formData = new FormData(form);
formData.append('avatar', blob, 'avatar.jpg');
fetch("/my.php", {method: 'POST', body: formData});
});

laimas 06.10.2019 07:48

var formData = new FormData(form) - до работы с изображениями.
formData.append('key_name', blob, 'name.ext') - при работе с изображениями.
fetch(...) - после работы с изображениями.

Rise 07.10.2019 13:16

Цитата:

Сообщение от тоша
другого решения не нашел только через blob

Теоретически можно и 'data:image...' отправить, это же обычная строка, formData.append('avatar', 'data:image...', 'avatar.jpg').
Цитата:

Сообщение от тоша
new FormData(form)

Так оригиналы изображений тоже отправятся, если поля имеют name и принадлежат этой form.
Цитата:

Сообщение от тоша
'avatar.jpg'

По-умолчанию там png, чтобы был jpg надо явно указывать canvas.toBlob(function(blob){...}, 'image/jpeg').


Часовой пояс GMT +3, время: 22:43.