Vue和Axios的进度条

Question

我正在制作一个图片上传器，并且我想要显示一个进度条，一旦选择一个文件就会开始递增。

我用爱可信访问后端，并将其设置是这样的：

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