axios+Vue实现上传文件显示进度功能
前言
最近项目中有一个上传文件时需要显示上传进度的功能，在文件很大或者网速很慢的情况下，上传过程中需要给出实时的上传进度百分比，来提高用户体验度。
效果
image.png
实现
利用axios的 onUploadProgress方法进行监听，函数会返回一个loaded 和total，通过计算进行实时更新上传进度。
/**
* @param event 文件
* getFile 附件上传
*/
async getFile (event) {
let formData = new FormData()
formData.append('sourceKey', this.editedOriginDetail.claimId)
formData.append('sourceType', 'MOA_CLAIM_ATTACHMENT')
formData.append('files', event.target.files[0])
this.visible ? formData.append('eleFlag', 'N') : formData.append('eleFlag', 'Y')
let token = storage.get('userToken')
let url = '/bxt/api/sys/attach/upload'
// 为了更好阅读，使用未封装axios
axios({
url,
method: 'post',
data: formData,
headers: {
'Authorization': `Bearer ${token}`
},
//原生获取上传进度的事件
onUploadProgress: progressEvent => {
this.showProcess = true
let process = (progressEvent.loaded / progressEvent.total * 100 | 0)
this.progress = `上传进度：${process}%`
}
}).then(res => {
this.showProcess = false
this.$hips.toast('上传成功')
this.visible ? this.getFileList() : this.getEleFileList()
}).catch(err => {
console.log(err)
})
},
作者：BlinglingSam
链接：https://www.jianshu.com/p/00f6e1eea23d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。