1 个数组中的多个 Base64 图像导致覆盖

Question

假设我想上传 2 张图片到 ajax，我将使用这种格式发送它们

 { "base64StringName:" : "[ {"1": "base64_1"}, {"2" : "base64_2"} ]"}

所以它是一个包含 base64 字符串对象数组的对象为此，我需要创建一个数组，并在该数组内将 json 个对象推入其中。

这是我的代码：

        <script>
        var test ='';
        var imageArray =[];
       var imageObject ={};
$('#inputFileToLoad').on('change', function(){    
  imageArray.length = 0;
 fileCount = this.files.length;
   for(i = 0; i < fileCount; i++){
  var file = document.querySelector('#inputFileToLoad').files[i];
   var reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () {
    test = reader.result.split(',')[1];
    console.log(test);
    imageObject[i] = test;
     imageArray.push(imageObject);
   };
   reader.onerror = function (error) {
     alert('Error: ', error);
   };
}

});
$('#inputFileToLoadButton').on('click', function(){
  console.log(imageArray);
$.ajax({

                url:"some url",
                method:"POST",
                data: {
                  "base64String": imageArray
                }
                    ,success: function () {
                        swal("Success!","Upload Finished!","success");
                        //add redirect!
                    },
                    error: function (jqXHR) {
                        swal("Error",jqXHR.responseText, "error");
                      }                    
             });
});    
    </script>

但是，我遇到了一个问题，数组中的第一个对象不知何故被覆盖了。它变成了

 { "base64StringName:" : "[ {"1": "base64_2"}, {"2" : "base64_2"} ]"}

此外，当我在 console.log(test); 打印出第一个 base64 编码文件时，它是未定义的，但是当我打印出第二个 base64 编码文件时，它只打印第二个文件。

Answer 1

试试这个：

var test = '';
var imageArray = [];
var imageObject;
$('#inputFileToLoad').on('change', function() {
  imageArray.length = 0;
  fileCount = this.files.length;
  for (i = 0; i < fileCount; i++) {
    debugger;
    var file = document.querySelector('#inputFileToLoad').files[i];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function() {
      test = this.result.split(',')[1];
      imageObject = {};
      imageObject[index] = test;
      imageArray.push(imageObject);
    }.bind({
      index: i
    });
    reader.onerror = function(error) {
      alert('Error: ', error);
    };
  }

});

1 个数组中的多个 Base64 图像导致覆盖

Multiple Base64 image within 1 array causes overriding

javascript

arrays

base64