Php 使用一个JSON请求发送多个图像

我正在构建RESTAPI， 我想上传一个post请求的多个图像

所以在这里。 我正在尝试创建一个由base64字符串组成的选定图像数组。 该数组是JSON.stringify（图片上传到图片上传）以转换为字符串。 并将该字符串作为JSON post发送。 在服务器端，使用json_decode（）对字符串数组进行解码并保存图像

我的方法正确吗？ 我无法执行JSON.stringify（图像到上传），因为这不会返回任何内容

有没有更好的方法来处理这个问题

JAVASCRIPT

  $("#UploadImage").click(function(){
    var filesSelected = document.getElementById("filesToUpload").files;
    var images_to_upload = new Array();
    //Loop through each image
    for(var i=0;i<filesSelected.length;i++)
    {
      var fileToLoad = filesSelected[i];
      var fileReader = new FileReader();
      fileReader.onload = function(fileLoadedEvent){
        var img_string = fileLoadedEvent.target.result;
        //push base64 string in arrray
        images_to_upload.push(img_string);
      };
      fileReader.readAsDataURL(fileToLoad);
     }

    console.log(JSON.stringify(images_to_upload));  //this doesnt work
    data = {
      "images_data":JSON.stringify(images_to_upload) ,
      };
    url = "http://app.com/api/customer/uploadmultipleimg";
    $.ajax({
      type: "POST",
      url: url,
      data:data,
      success: function(result){
        console.log(result);
      },
      failure: function(errMsg) {
         console.log(errMsg);
      }
      });
  });

$（“#上传图像”）。单击（函数（）{
var fileselected=document.getElementById（“filesToUpload”）.files；
var images_to_upload=新数组（）；
//循环浏览每个图像
对于（var i=0；i我认为您可能遇到了竞争条件。我更新了代码，仅在
文件读取器处理完最终图像后调用API。这在我的测试版本的控制台中可靠地显示了数组及其内容

$(document).ready(attach_upload_button_click_handler);

function attach_upload_button_click_handler() {
    $("#UploadImage").click(upload_images);
}

function upload_images() {
    var selected_files = document.getElementById("filesToUpload").files;
    var images_to_upload = new Array();

    for (let i = 0; i < selected_files.length; i++) {

        var fileReader = new FileReader();
        fileReader.onload = function (event) {
            images_to_upload.push(event.target.result);

            if (i == selected_files.length - 1) {
                post_data_to_api(images_to_upload);
            }
        };

        fileReader.readAsDataURL(selected_files[i]);
    }
}

function post_data_to_api(images_to_upload) {
    console.log(JSON.stringify(images_to_upload));

    // CALL API
}

$（文档）.ready（附加上传按钮点击处理程序）；
函数附加\上传\按钮\单击\处理程序（）{
$（“#上载图像”）。单击（上载图像）；
}
函数upload_images（）{
var selected_files=document.getElementById（“filesToUpload”）.files；
var images_to_upload=新数组（）；
for（设i=0；i
您的代码的可能副本似乎对我很有用。当您进行此调用时，您在控制台中看到了什么：
console.log（JSON.stringify（images\u to\u upload））
？您最后对其进行了排序吗？这只给出了base64中的一个image@PramitSawant这是JS FIDLE中的代码：。如果您检查控制台，您将看到阵列中的所有文件。谢谢：）
$(document).ready(attach_upload_button_click_handler);

function attach_upload_button_click_handler() {
    $("#UploadImage").click(upload_images);
}

function upload_images() {
    var selected_files = document.getElementById("filesToUpload").files;
    var images_to_upload = new Array();

    for (let i = 0; i < selected_files.length; i++) {

        var fileReader = new FileReader();
        fileReader.onload = function (event) {
            images_to_upload.push(event.target.result);

            if (i == selected_files.length - 1) {
                post_data_to_api(images_to_upload);
            }
        };

        fileReader.readAsDataURL(selected_files[i]);
    }
}

function post_data_to_api(images_to_upload) {
    console.log(JSON.stringify(images_to_upload));

    // CALL API
}