angularjs 多文件上传和解析

Question

我制作了一个带有多个上传 csv 文件的界面（完成）。

必须使用使用 $q（完成）的自定义 fileReader 服务将此 CSV 文件加载到导航客户端，然后使用 ngPapaParser（完成）解析并显示在视图中ngTable（已完成但未在示例中简化）。

这是一个 plunkr，显示了我遇到的错误：http://plnkr.co/edit/YVvitZ2yfxjJw76n6t9F?p=preview

问题是需要在 fileReader.readAsText 承诺中获取文件名，但我不知道如何获取它。

controller('MainCtrl', function($scope, Papa,fileReader) {

  $scope.parsedResults = [];

   $scope.getFiles = function (files) {
      $scope.parsedResults = [];
      // Loop through the FileList and render image files as thumbnails.
      for (var i = 0, f; f = files[i]; i++) {
          console.log(f.name); // ok her 
          fileReader.readAsText(f, $scope).then(function(resultText) {
              Papa.parse(resultText, {
                  header: true,
                  //   worker: true,
                  skipEmptyLines: true,
                  complete: function(result) {
                      var cols= [];
                      for(var i in result.meta.fields){
                          cols.push({
                              field: result.meta.fields[i] , title: result.meta.fields[i].toLowerCase() , show: true
                          });
                      }
                      console.log(f.name); // undefined her in the callback
                      //I WANT THE FILENAME HER !!! 
                      var io = { 'filename': 'f.name unknow' ,'cols':cols ,'tableParams': result.data  } ;
                      $scope.parsedResults.push(io);
                  }
              });
          });
      }
  };
});

如何让下面的函数返回一个 promise 和文件？

var readAsText = function (file, scope) {
   var deferred = $q.defer();
   var reader = getReader(deferred, scope);
   reader.readAsText(file);
   // how to return an object her, or the deferred promise and the file ?
   return deferred.promise;
};

Answer 1

试试这个：

var readAsText = function (file, scope) {
   var deferred = $q.defer();
   var reader = getReader(deferred, scope);
   reader.readAsText(file);
   // then will return another promise with content and file available
   return deferred.promise.then(function(result){
        return {
            content: result,
            file: file
        };
   });
};

您可以按如下方式使用它：

readAsText(file, $scope).then(function(result){
    var content = result.content;
    var file = result.file;
    //...
})

angularjs 多文件上传和解析

angularjs multi upload file and parsing

filereader

angularjs