情景1:for循环多次请求同一个接口
思路:
- 定义一个全局变量 num
- 每请求成功一次,变量累加 this.num=this.num+1
- 通过钩子函数watch监听变量num
- 在监听函数里面进行百分比计算 Math.round(num/(for循环的总次数)*100),并动态绑定到进度条组件
情景2:上传或下载,只请求一个接口
使用 axios 的 onDownloadProgress 和 onUploadProgress 方法进行监听,代码如下:
var form = new FormData()
form.append('file', vm.$refs.upload.files[0])
form.append('id', id)
form.append('type', type)
var config = {
onUploadProgress: progressEvent => {
var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
this.progress = complete
}
}
axios.post(`api/uploadFile`,
form, config).then((res) => {
if (res.data.status === 'success') {
console.log('上传成功')
}
})