vue 请求后台接口，进度条实时更新

情景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('上传成功') } })