Angular 算法：停止 ngFileUpload 双循环？

Question

我有一个控制器：

app.controller('FileUploadController', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
    $scope.$watch('files', function () {
        $scope.upload($scope.files);
    });

    $scope.$watch('file', function () {
        if ($scope.files !== null) {
            $scope.upload([$scope.file]);
        }
    });

    $scope.upload = function (files) {
        $scope.log = '';
        if (files && files.length) {
            $scope.numberOfFiles = files.length;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                if (file && !file.$error) {
                    Upload.upload({
                        url: 'http://localhost/Reconcile/index.php',
                        file: file
                        // fileName: i // to modify the name of the file(s)
                    }).progress(function (evt) {
                        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                        $scope.log = progressPercentage;
                    }).success(function (data, status, headers, config) {
                        for (var j = 0; j < 2; j++) {
                            $scope.parsePapa(files[j], j);
                        }
                    }).error(function (data, status, headers, config) {
                        $scope.log = 'error status: ' + status;
                    });
                }   
            }
        }
    };
}]);

它基本上用于允许通过 ngFileUpload which is then parsed by Papa Parse 拖放 csv 文件。在我调用 Papa Parse（位于 $scope.parsePapa）时，我需要第二个参数来发送有关上传了哪个文件的信息（只需一个索引就可以）以用于稍后的组织目的，第一个参数是文件本身.问题是，如果对于成功功能，我做了这样的事情：

}).success(function (data, status, headers, config) {
    $scope.parsePapa(files[i], i);
}

发生的事情是 success 只有在两个文件都完成上传后才会被调用。到那时，i 已经是 2（在 2 个文件的情况下：第一次通过 0，第二个文件 1，第二个文件之后 2）。如果我使用上面的代码，它不会 return 一个文件，因为如果上传了两个文件， files[2] 的索引没有存储任何内容。

为了解决这个问题，我在 for 循环中使用了一个循环，它将遍历 files 的长度并打印出 files 中包含的每个 file。但是，由于将有多个文件，当前的行为实际上是（例如，在上传 2 个文件的情况下）解析每个文件两次。我正在解析具有 1,000,000 行（稍后比较）的 csv 文件，因此上传两次会影响性能。

In short I am looking for a way to send each file to $scope.parsePapa(file, fileNumber), only once.

如有任何帮助，我们将不胜感激。我是 Angular 的新手，如果我错过了一些简单的事情，请提前致歉。

编辑：danial 解决了问题（见下文）。如果有人感兴趣，最终代码如下所示：

app.controller('FileUploadController', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
$scope.$watch('files', function () {
    $scope.upload($scope.files);
});

function uploadFile(file, index) {
    Upload.upload({
        url: 'http://localhost/Reconcile/index.php',
        file: file
        // fileName: i // to modify the name of the file(s)
    }).progress(function (evt) {
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
        $scope.log = progressPercentage;
    }).success(function (data, status, headers, config) {
        $scope.parsePapa(file, index);
    }).error(function (data, status, headers, config) {
        $scope.log = 'error status: ' + status;
    });
}

$scope.upload = function (files) {
    $scope.log = '';
    if (files && files.length) {
        $scope.numberOfFiles = files.length;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            if (file && !file.$error) {
                uploadFile(file, i);
            }
        }
    }
};

}]);

Answer 1

如果你想知道上传文件的索引，你可以这样做：

 function uploadFile(file, index) {
    Upload.upload({....}).success(function() {
       $scope.parsePapa(file, index);
    })...;
 }

 $scope.upload = function (files) {
    if (files && files.length) {
       var file = files[i];
       if (file && !file.$error) {
          uploadFile(file, i);
       }
    }
 }

此外，如果您允许多个文件，则只需要这两个手表中的一个，第一个就足够了：

$scope.$watch('files', function () {
    $scope.upload($scope.files);
});

$scope.$watch('file', function () {
    if ($scope.files !== null) {
        $scope.upload([$scope.file]);
    }
});

Angular 算法：停止 ngFileUpload 双循环？

Angular algorithm: stop ngFileUpload double looping?

javascript

csv

angularjs

papaparse

ng-file-upload