javascript - Angular 算法 : stop ngFileUpload double looping?

Question

我有一个 Controller :

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 拖放 csv 文件然后由 Papa Parse 解析.在我调用 Papa Parse(位于 $scope.parsePapa)时，我需要第二个参数来发送关于上传了哪个文件的信息(只需一个索引就可以)以用于稍后的组织目的，第一个参数是文件本身。问题是，如果对于成功功能，我做了这样的事情:

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

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

为了解决这个问题，我在 for 循环中使用了一个循环，它将遍历 files 的长度。并打印出每个 file包含在 files 中.但是，由于将有多个文件，当前的行为实际上是(例如，在上传 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);
       }
    }
 }

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

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

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