отправить несколько файлов формате 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]

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

[Rise]

другого решения не нашел только через 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').