Question

我尝试读取文件，从fileReader创建＆＃34; FileContainer＆＃34;和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在完成时访问异步任务的结果。 <{1}}会在结果可用时立即运行。

如果您想了解有关承诺的更多信息，SO thread可以很好地解释承诺。

Answer 2

我猜这里的问题是，你正在监听onload，它会在每次读取操作时被调用，因此在开始时可能为空（reference），尝试将其更改为{ {1}}。

Answer 3

我真的不需要在承诺中包装FileReader API调用。您可以这样做，但根据文档（https://developer.mozilla.org/en-US/docs/Web/API/FileReader）FileReader.onload在数据准备好时调用。执行额外的deffered.resolved以便能够使用then只是一件好事。

我创造了一个小提琴。即使使用大文件，只有在数据可用时才会进行http调用。我的代码中没有发现错误。愿你可以用小提琴试试。

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

FileReader JS Api在它准备好之前调用Fire

3 个答案: