AngularJSでの非同期ファイルのアップロードの進捗状況を検出します。

Question

一度開かれたサーバーにファイルをアップロードしようとしています。私は私のサービスに機能を持ち、私のファイルをアップロードするためにそのサービスを呼びます。これが私のサービス機能です。

function post(file) { 
var file = file; 
if (angular.isDefined(file)) { 
    return Upload.upload({ 
    url: filesConfig.uploadFile, 
    data: { 
     file: file 
    } 
    }).then(function (response) {   
     return response; 
    }, 
    function (error) { 
     return error; 
    }, 
    function (evt) { 
     var progress = parseInt(100.0 * evt.loaded/evt.total);   
     console.log('progress: ' + progress + '% ' + evt.config.data.file.name); 
    }); 
} 


} 

最後のevt arg関数では、変数が進捗しています。私はこのようなコントローラからこのポスト関数を呼び出しています。

angular.element(document.querySelector('#fileinput')).on('change', function() { 
for (var i = 0; i < this.files.length; i++) { 
    vm.filess.push(this.files[i]); 
    fileUpload.post(vm.filess[i]).then(function (response) { 
    console.log(response); 
    }); 
} 
}); 

コントローラの各ファイルの進捗状況を検出して、UIの進行状況バーを表示します。進行状況を検出する方法は？

Answer 1

最も簡単で解決方法は以下のとおりです。コントローラで

：

angular.element(document.querySelector('#fileinput')).on('change', function() { 
    for (var i = 0; i < this.files.length; i++) { 
    var item = { 
     file: this.files[i] 
    }; 

    vm.filess.push(item); 

    fileUpload.post(item).then(function (response) { 
     console.log(response); 
    }); 
    } 
}); 

サービスで：それをやって

function post(item) { 
    var file = item.file; 

    if (angular.isDefined(file)) { 
    return Upload.upload({ 
     url: filesConfig.uploadFile, 
     data: { 
     file: file 
     } 
    }).then(function (response) {   
     return response; 
     }, 
     function (error) { 
     return error; 
     }, 
     function (evt) { 
     item.progress = parseInt(100.0 * evt.loaded/evt.total); 
     }); 
    } 
} 

、あなたがラップしているあなたのfileアイテムオブジェクト内に、そのオブジェクトのプロパティとしてfileを維持します。あなたのサービスでは、アイテムの参照を直接変更しています。

vm.filessをループするだけで、動的プロパティprogressにアクセスできます。

最高の解決策ではありませんが、あなたの設定で考えるのが最も速いと思います。