When you encounter a problem about uploading multiple base64 images, you want to first convert the base64 images into blob objects, and then put them into formdata and upload them to the backend.

No problem to convert to blob object in the first step:
function dataURItoBlob (base64Data) {

var byteString;
if (base64Data.split(",")[0].indexOf("base64") >= 0){
  byteString = atob(base64Data.split(",")[1]);
}else{
  byteString = unescape(base64Data.split(",")[1]);
}
var mimeString = base64Data.split(",")[0].split(":")[1].split(";")[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; iPP) {
    ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {type:mimeString});

}
but the second step does not feel right to put the blob object into the formdata:

var fd = new FormData(obj);
var blob = dataURItoBlob (base64,"mimeString");
fd.append("files[]", blob);
ajax405
Apr.08,2021

  MDN-FormData  

Menu