Vue.js：進捗状況のアップロードが表示されない

Question

私はVuejs + Firebase Storageにアップローダーコンポーネントを作成しようとしています。メソッドは正常に動作しますが、ビューにアップロードされたパーセントを表示することはできません。ここに私のコード：

<template> 

    <div> 
    <input type="file" multiple accept="image/*" @change="detectFiles($event.target.files)"> 
    <div>{{progressUpload}}</div> 
    </div> 

</template> 

<script> 

import { storage } from '../firebase' 
export default { 
    data() { 
    return { 
     progressUpload: 0, 
     file: File, 
    } 
    }, 
    methods: { 
    detectFiles (fileList) { 
     Array.from(Array(fileList.length).keys()).map(x => { 
     this.upload(fileList[x]) 
     }) 
    }, 
    upload (file) { 
     let uploadTask = storage.ref('imagenes/articulos').put(file); 

     uploadTask.on('state_changed', function(snapshot) { 
     this.progressUpload = Math.floor(snapshot.bytesTransferred/snapshot.totalBytes * 100); 
     }) 

     uploadTask.then(() => { 
     console.info('File uploaded!'); 
     }) 
    } 
    } 
} 
</script> 

HTMLテンプレートの{progressUpload}}は表示されません。しかし、コンソールでは、結果は完全にログに記録されます。ファイルが正しくアップロードされています

Answer 1

[OK]を解決しました。私はアップロードタスクの非同期メソッドの新しい値を返すウォッチャーにuploadProgress計算を追加しなければなりませんでした。ですから、私のスクリプトは次のとおりです：

<script> 

import { storage } from '../firebase' 
export default { 
    data() { 
    return { 
     progressUpload: 0, 
     file: File, 
     uploadTask: '' 
    } 
    }, 
    methods: { 
    detectFiles (fileList) { 
     Array.from(Array(fileList.length).keys()).map(x => { 
     this.upload(fileList[x]) 
     }) 
    }, 
    upload (file) { 
     this.uploadTask = storage.ref('imagenes/articulos').put(file); 

     this.uploadTask.then(() => { 
     console.info('Archivo guardado correctamente'); 
     }) 
    } 
    }, 
    watch: { 
    uploadTask: function() { 
     this.uploadTask.on('state_changed', sp => { 
     this.progressUpload = Math.floor(sp.bytesTransferred/sp.totalBytes * 100) 
     }) 
    } 
    } 
} 
</script>