javascript - 从文件夹 AngularJs 上传图像列表

Question

我想从文件夹上传图像列表并将它们作为字节流存储在数据库中。我想给 angularjs 包含图像的文件夹，而不是选择多个文件。下面给出了负责的代码部分。

  $scope.uploadMultipleQuestions = function(e) {
      var questionList = []
      var difficultyLevel = vm.question.difficultyLevel;
      var theFiles = e.files;
      for (var i = 0; i < theFiles.length; i++) {
          var ques = {};
          ques.questionString = theFiles[i].name;
          DataUtils.toBase64(theFiles[i], function(base64Data) {
              $scope.$apply(function() {
                  ques.questionImage = base64Data;
              });
              [![enter image description here][1]][1]
          });
          ques.questionImageContentType = theFiles[i].type;
          ques.questionString = theFiles[i].webkitRelativePath.split("/")[1];

          questionList.push(ques);
          Question.uploadMultipleQuestions(questionList);
      }
      for (var i = 0; i < questionList.length; i++) {
          console.log(questionList[i]);
      }
      //Question.uploadMultipleQuestions(questionList);

  }

但问题是我在日志中收到以下详细信息。(下面附有屏幕截图)

正如您所看到的，只有最后一个对象包含图像数据，而其他对象都没有任何图像内容。

让我知道为什么会出现这个问题以及如何解决该问题。

Answer 1

将图像转换为 Base64 需要一段时间，因此您必须在 ques.questionImage 填充后上传图像。

var uploadMultipleQuestions = function(files, i, output) {

    if (files.length == i) {
        for(var j=0;j<output.length;j++)
            console.log(output[j]);

        return Question.uploadMultipleQuestions(output);
    }


    DataUtils.toBase64(files[i], function(base64Data) {

        output.push({
            questionString: files[i].name,
            questionImageContentType: files[i].type,
            questionString: files[i].webkitRelativePath.split("/")[1],
            questionImage: base64Data
        });

        uploadMultipleQuestions(files, i+1, output);

    });
}

$scope.uploadMultipleQuestions =function(e){
    var theFiles = e.files;
    uploadMultipleQuestions(theFiles, 0, []);
}