https://github.com/axios/axios#request-config
// `onUploadProgress` allows handling of progress events for uploads
onUploadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
工作中用到的是利用一個callback函數(shù)拿到上傳時的進度.
FileUploader.vue
let callback = (progress)=>{
self.progress = progress
}
upload(formData,callback).then((response)=>{
console.log(response)
}).catch((err)=>{
})
api.js
export function upload(file,callback) {
const url = `${BASE_URL}/api/upload`;
let config = {
headers: {
'Content-Type': 'multipart/form-data',
},
onUploadProgress: function(progressEvent) {
let percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
callback(percentCompleted)
}
}
return axios.post(url,file,config);
}
