FileReader JS Api 在它准备好之前呼叫 Fire

Question

我正在尝试读取一个文件，创建一个 "FileContainer" 和一个来自 fileReader 的 DataUrl，以便我可以将它发送到网络 api。

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

我的 reader 代码看起来像这样

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 一有结果就运行。

如果您想了解更多有关 promises 的内容，SO thread 对此做了很好的解释。

Answer 2

我猜这里的问题是，你正在听 onload，显然它在每次读取操作时都会被调用，因此在开始时可能为 null（reference），请尝试更改它至 onloadend。

Answer 3

我真的不认为有必要在承诺中包装 FileReader API 调用。您可以这样做，但根据文档 (https://developer.mozilla.org/en-US/docs/Web/API/FileReader) FileReader.onload 在数据准备就绪时被调用。做一个额外的 deffered.resolved 来使用 then 真是太好了。

我创建了一个 fiddle。即使是大文件，只有在数据可用时才会进行 http 调用。我真的没有在您的代码中看到错误。你可以用 fiddle.

试试看

http://jsfiddle.net/tjruzpmb/212/

FileReader JS Api 在它准备好之前呼叫 Fire

FileReader JS Api Call Fire before it's ready

javascript

jquery

filereader

angularjs

angularjs-http