1.在封装的请求api函数中增加一个onDownloadProgress参数
export function getTxtUid(query,onDownloadProgress){
return service({
method:'post', //请求的方法
url:`/*************`, //请求的地址
params: query, //提交的参数
onDownloadProgress:onDownloadProgress,
})
}
2、在index.vue发起请求函数中,调用定好的函数onDownloadProgress
const onDownloadProgress_getTxtUid = (progressEvent) => {
// console.log("progressEvent.loaded已经下载的kb:",progressEvent.loaded)
// console.log("progressEvent.total总的kb :",progressEvent.total )
// console.log("progressEvent :",progressEvent )
let percentage=Math.round( (progressEvent.loaded/progressEvent.total)*100)
// console.log("百分比:",percentage)
percentage.value=percentage
}
getTxtUid(param,onDownloadProgress_getTxtUid).then(res =>{})
3、进度条中展示percentage的值
<n-progress
type="line"
:percentage="percentage"
:indicator-placement="'inside'"
processing
/>