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;
        }
    });
}

但是，当我在$scope.errors = failure;中设置error时，为时已晚，因为它总是先进入function(evt)。所以一切都以0％的进展结束。

我的理解是文件必须在服务器拒绝之前发送到服务器，这就是$scope.errors设置得太迟的原因。

我尝试更改一下以使用.then，.error，.progress代替，但无济于事。

我该怎么做才能解决这个问题？

Answer 1

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

除非您为每个文件单独更新上传状态的用户，否则您可能需要考虑使用错误[index] （见下文）之类的内容，以便跟踪所有文件错误。< / p>

另外，因为在获得evt之前总是会failure，所以在完成所有操作后，您可以对$scope.progress[index]进行检查/设置。您的进度条最多可达100，但会回到0。

另请注意我们在第2行创建了$scope.errors数组，因此稍后设置$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
    });
}

.progress没有看到来自.error的更新范围值

1 个答案: