javascript - .progress 没有看到 .error 中更新的范围值

Question

我正在尝试显示多个文件上传的进度条，但如果服务器出于某种原因拒绝它，我希望将其重置为 0

使用angular-file-upload选择输入时会触发以下代码:

$scope.start = function(index) {
    $scope.errors = null;
    $scope.progress[index] = 0;
    $scope.upload[index] = $upload.upload({
        url: API_URL.url + API_URL.loc + 'shop/upload/file',
        method: 'POST',
        headers: {},
        useXDomain: true,
        data: {entry_id: 1, resource_type: 'file', resource_content_type: 'image', resource: $scope.selectedFiles[index], auth_token: UserService.token},
    }).then(function(response) {
        $scope.errors = null;
        $scope.uploadResult.push(response.data.result);
    }, function(failure) {
        $scope.errors = failure.data;
    }, function(evt) {
        if(angular.isUndefined($scope.errors) || $scope.errors === null) {
            $scope.progress[index] = parseInt(100.0 * evt.loaded / evt.total);
        } else {
            $scope.progress[index] = 0;
        }
    });
}

但是，当我在 error 中设置 $scope.errors = failure; 时，为时已晚，因为它总是进入 function(evt) 首先。所以一切最终都显示为 0% 进度。

我的理解是，文件必须先发送到服务器，然后服务器才能拒绝它，这就是为什么 $scope.errors 设置得太晚的原因。

我尝试对其进行一些更改以使用 .then、.error、.progress 代替，但无济于事。

我可以做什么来解决这个问题？

Answer 1

您提到上传多个文件，但您在每个上传项目上单独设置 $scope.errors 。

除非您分别更新用户的每个文件的上传状态，否则您可能需要考虑使用错误[索引](见下文)之类的内容，以便跟踪所有文件错误。

另外，因为你总是会得到 evt在你得到 failure 之前，您可以检查/设置 $scope.progress[index]当这一切完成之后。您的进度条将上升到 100，但会下降到 0。

另请注意，我们创建了 $scope.errors第 2 行上的数组因此设置 $scope.errors[index]稍后将不会导致错误。

作为旁注:

} else {
    $scope.errors[index] = null;
}

我不认为else现在不再需要了，因为我们设置了 errors每次$scope.start被调用。

$scope.start = function(index) {
    $scope.errors = []; // Create errors array so we can set each index later on
    $scope.progress[index] = 0;
    $scope.upload[index] = $upload.upload({
        url: API_URL.url + API_URL.loc + 'shop/upload/file',
        method: 'POST',
        headers: {},
        useXDomain: true,
        data: {entry_id: 1, resource_type: 'file', resource_content_type: 'image', resource: $scope.selectedFiles[index], auth_token: UserService.token},
    }).then(function(response) {
        $scope.uploadResult.push(response.data.result);
    }, function(failure) {
        $scope.errors[index] = failure.data;
    }, function(evt) {
            $scope.progress[index] = parseInt(100.0 * evt.loaded / evt.total);
    }).then(function(){ // After everything else is done
        if(!(angular.isUndefined($scope.errors[index]) || $scope.errors[index] === null))
            $scope.progress[index] = 0; // Set progress back to 0 if there's an error
    });
}