Question

我的AngularJS应用程序中有这个服务功能，我将从此函数返回日志。我用这个语句调用了这个函数：

vm.log = uploadService.uploadFiles(vm.files, 'Username');

但vm.log始终为空字符串。我现在的问题是如何更改函数 uploadFiles 以便在调用时获取日志语句。

function uploadFiles(files, username) {
        var log = '';
        if (files && files.length) {
            for (var i = 0; i < files.length; i++) {
              var file = files[i];
              if (!file.$error) {
                Upload.upload({
                    url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
                    data: {
                      username: username,
                      file: file  
                    }
                }).then(function (resp) {
                    $timeout(function() {
                        log = 'file: ' + resp.config.data.file.name + ', Response: ' + JSON.stringify(resp.data) + '\n' + log;
                        return log;
                    });
                }, null, function (evt) {
                    var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                    log = 'progress: ' + progressPercentage + '% ' + evt.config.data.file.name + '\n' + log;
                });
              }
            }
        }
        return log; // this does return an empty string in every case
    };

Answer 1

function uploadFiles(files, username) {
        if (files && files.length) {
            for (var i = 0; i < files.length; i++) {
              var file = files[i];
              if (!file.$error) {
                Upload.upload({
                    url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
                    data: {
                      username: username,
                      file: file  
                    }
                }).then(function (resp) {
                    return 'file: ' + resp.config.data.file.name + ', Response: ' + JSON.stringify(resp.data) + '\n';
                }, null, function (evt) {
                    var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                    return 'progress: ' + progressPercentage + '% ' + evt.config.data.file.name + '\n';
                });
              }
            }
        }
    };

Answer 2

您的uploadFiles功能正在触发多个异步上传。每次调用Upload.upload()都是异步的。所以我不确定为什么你会期望调用uploadFiles方法返回一个字符串？

处理此问题的一个方法是传递成功和进度记录的回调：

function uploadFiles(files, username, successCallback, progressCallback) {
    if (files && files.length) {
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            if (!file.$error) {
                Upload.upload({
                    url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
                    data: {
                        username: username,
                        file: file  
                    }
                }).then(function (resp) {
                    var log =  'file: ' + resp.config.data.file.name + ', Response: ' + JSON.stringify(resp.data);
                    if (successCallback) {
                        successCallback(log);
                    }

                }, null, function (evt) {
                    var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                    var log = 'progress: ' + progressPercentage + '% ' + evt.config.data.file.name;

                     if (progressCallback) {
                        progressCallback(log);
                    }
                });
            }
        }
    }
};

现在我们可以通过执行以下操作来调用此代码：

uploadService.uploadFiles(vm.files, 'Username', console.log, console.log);

如果您不希望单独触发每个回调，但是您希望记录单个字符串消息，连接所有不同的上传，您可以使用：

function handleUploadCompleted(amountOfFilesHandled, amountOfFiles, callback, log) {
    if(amountOfFilesHandled === amountOfFiles) {
        // Finished
        if (callback) {
            callback(log);
        }
    }
}

function uploadFiles(files, username, callback) {
    var log = '';

    if (files && files.length) {
        var amountOfFiles = files.length;
        var amountOfFilesHandled = 0;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            if (!file.$error) {
                Upload.upload({
                    url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
                    data: {
                        username: username,
                        file: file  
                    }
                }).then(function (resp) {
                    log =  'file: ' + resp.config.data.file.name + ', Response: ' + JSON.stringify(resp.data) + '\n' + log;
                    amountOfFilesHandled++:

                    handleUploadCompleted(amountOfFilesHandled, amountOfFiles, callback, log);

                }, function() {
                    // TODO: add logging when something went wrong ?
                    amountOfFilesHandled++:

                    handleUploadCompleted(amountOfFilesHandled, amountOfFiles, callback, log);
                }, function (evt) {
                    var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                    log = 'progress: ' + progressPercentage + '% ' + evt.config.data.file.name + '\n' + log;
                });
            }
        }
    }
};

现在我们可以使用：

来调用它

uploadService.uploadFiles(vm.files, 'Username', console.log);

AngularJS服务函数具有超时 - 返回

2 个答案: