javascript - FileReader JS Api 在准备就绪之前调用 Fire

Question

我正在尝试读取一个文件，创建一个“FileContainer”，并从 fileReader 中创建一个 DataUrl，以便我可以将其发送到 Web api。

我的问题是 Api 调用在创建对象之前触发，因此我将 Null 发送到 api。这意味着如果我发送一个小文件，它就可以工作。

我为读者提供的代码看起来像这样

var reader = new FileReader();
reader.onload = (function (theFile) {
    return function (e) {
        var newFile = {
            name: theFile.name,
            type: theFile.type,
            size: theFile.size,
            lastModifiedDate: theFile.lastModifiedDate
        }
        var binaryString = e.target.result;
        updloadedFile(newFile, binaryString, selectedFolder, scope, fileProgrss);
        }
    };
})(f);
reader.readAsDataURL(f)

还有我的 http.post 调用

function updloadedFile(file, data, selectedFolder, scope, fileProgrss) {

    var dummyobj = {
        Name: file.name,
        Extension: file.name.split('.')[0],
        Path: selectedFolder.Path,
        DataString: data,
    }

    $http.post('/api/Files/Upload/',
      JSON.stringify(dummyobj),
      {
          headers: {
              'Content-Type': 'application/json'
          }
      }
  ).success(function (data2) {

  }).error(function (data, status, headers, config) {
  });
}

Answer 1

您需要将您的 FileReader 包装在 promise 中

function fileReader(file) { // perform async operation
    var deferred = $q.defer();

    var reader = new FileReader();
    reader.onload = function() {
      // Your reader.onload code here
      deferred.resolve(reader.result);
    };        

    reader.readAsDataURL(f);   
    return deferred.promise;
};

然后您可以像这样调用 uploadedFile() 函数:

fileReader().then(function(result){
  updloadedFile(..., ..., ..., ...)
});

通过使用promise对象，您可以使用then访问异步任务完成时的结果。一旦结果可用，then 就会运行。

如果您想了解有关 Promise 的更多信息，请阅读此 SO thread解释得很好。