vue项目中一直未使用进度条,现在下载功能中,需要实现进度条的功能。找了下资料,可以在axios的钩子中加入onDownloadProgress,进行处理即可。由于axios已经进行了封装,那如何修改呢?
查看自己封装的axios为http,其定义的参数可以继续进行添加,所以就加入了onDownloadProgress,并将处理的方法downloadProgress作为参数处理,:
export function exportData(params,downloadProgress){
return http({
url: api.exportexceldata,
method: 'post',
data: params,
responseType:'blob',
onDownloadProgress: function (progressEvent) {
downloadProgress(progressEvent)
},
})
}
使用该api时,可以简单定义一个方法,
showProgess(progress){
this.percent = progress.loaded / progress.total
},
downloadFile(id){
this.percent=0
...
let that=this
exportData(option,that.showProgess).then((res)=>{ // 此处调用
...
})
然后html页面中定义progress组件即可了。
<a-progress :percent="percent" :showInfo="false"/>
通过以上方法就能实现简单的下载进度的展示了。