VueとAxiosを使ったプログレスバー

Question

イメージアップローダーを作っています。ファイルが選択されてからインクリメントを開始するプログレスバーを表示したいと思います。

は、私は、バックエンドへのアクセスにAxiosを使用して、このようなことのセットアップ持っている：

const BASE_URL = 'http://localhost:3000'; 

function uploadImage(data, listingId) { 
    const url = `${BASE_URL}/listings/${listingId}/images`; 
    let config = { 
    onUploadProgress(progressEvent) { 
     var percentCompleted = Math.round((progressEvent.loaded * 100)/
     progressEvent.total); 
     return percentCompleted; 
    }, 
    }; 
    return axios.post(url, data, config). 
     then(x => x.request.response). 
     catch(error => error); 
} 

がどのように私は以下のVue側からpercentCompletedにアクセスすることができますか？

inputDidChange(e) { 
    let inputData = e.target.files[0]; 
    var formData = new FormData(); 
    formData.append('image', inputData); 
    uploadImage(formData, this.listingId). 
    then((x) => { 
     var xParsed = JSON.parse(x); 
     this.newFile = xParsed.image.image.url; 
     this.files.push(this.newFile); 
     console.log('success'); 
    }); 
}, 

Answer 1

uploadImage関数にコールバックを渡します。

function uploadImage(data, listingId, onProgress){ 
    const url = `${BASE_URL}/listings/${listingId}/images`; 
    let config = { 
    onUploadProgress(progressEvent) { 
     var percentCompleted = Math.round((progressEvent.loaded * 100)/
     progressEvent.total); 

     // execute the callback 
     if (onProgress) onProgress(percentCompleted) 

     return percentCompleted; 
    }, 
    }; 
    return axios.post(url, data, config). 
     then(x => x.request.response). 
     catch(error => error); 
} 

そして、Vueメソッドを渡します。

methods:{ 
    onProgress(percent){ 
    //update vue 
    }, 
    inputDidChange(e) { 
    let inputData = e.target.files[0]; 
    var formData = new FormData(); 
    formData.append('image', inputData); 
    uploadImage(formData, this.listingId, this.onProgress). 
     then((x) => { 
     var xParsed = JSON.parse(x); 
     this.newFile = xParsed.image.image.url; 
     this.files.push(this.newFile); 
     console.log('success'); 
    }); 
    }, 
}