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

试试这个：

＆＃13;

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

＆＃13;

1个阵列中的多个Base64图像会导致覆盖

1 个答案: