タイムアウト付きAngularJSサービス関数 - 返信

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メソッドを呼び出すと、1つの文字列が返されると思いますか？

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

あなたがそれぞれをしたくない場合は、次の

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

は、今、私たちが行うことで、このコードを呼び出すことができます。これを処理する

一つaproachは成功と進歩ロギングのためのコールバックに渡すことであろうコールバックは別々にトリガーされますが、すべての異なるアップロードで連結された単一の文字列メッセージをログに記録することをお勧めします。

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