前言
最近項目中有一個上傳文件時需要顯示上傳進(jìn)度的功能刻伊，在文件很大或者網(wǎng)速很慢的情況下，上傳過程中需要給出實時的上傳進(jìn)度百分比智什，來提高用戶體驗度丁屎。
效果
image.png
實現(xiàn)
利用axios的 onUploadProgress方法進(jìn)行監(jiān)聽，函數(shù)會返回一個loaded 和total证九，通過計算進(jìn)行實時更新上傳進(jìn)度共虑。
/**
* @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}`
},
//原生獲取上傳進(jìn)度的事件
onUploadProgress: progressEvent => {
this.showProcess = true
let process = (progressEvent.loaded / progressEvent.total * 100 | 0)
this.progress = `上傳進(jìn)度：${process}%`
}
}).then(res => {
this.showProcess = false
this.$hips.toast('上傳成功')
this.visible ? this.getFileList() : this.getEleFileList()
}).catch(err => {
console.log(err)
})
},
