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拖放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文件（稍后进行比较），因此上传两次会影响性能。

简而言之，我正在寻找一种方法将每个文件发送到$ scope.parsePapa（file，fileNumber），只有一次。

非常感谢任何帮助。我是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]);
    }
});

角度算法：停止ngFileUpload双循环？

1 个答案: