Question

我当时正在构建rest API，我想在一个帖子请求中上传多张图片的地方。

所以在这里。我试图使数组的所选图像的base64字符串。该数组是JSON.stringify（images_to_upload）转换为字符串。然后将该字符串作为JSON帖子发送。然后在服务器端使用json_decode（）解码字符串数组并保存图像。

我的方法正确吗？我无法执行JSON.stringify（images_to_upload），因为此操作不会返回任何内容。

有没有更好的方法来解决这个问题？

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);
      }
      });
  });

HTML

<input type="file" name="filesToUpload" id="filesToUpload" multiple="" accept="image/x-png,image/jpeg">
<input type="submit" value="UploadImage" id="UploadImage" name="submit">

Answer 1

我认为您可能遇到了比赛情况。我已经更新了代码，仅在FileReader处理完最终图像后才调用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
}

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

1 个答案: