使用axios查看上传和下载进度的例子

1. 在utils下新建request.js引入 axios 库、进度条库 NProgress和配置 axios 拦截器

import axios from 'axios'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 创建axios
const service = axios.create({
  baseURL: process.env.VUE_APP_URL,
  timeout: 30000,
  method: "GET",
});

// 配置 axios 拦截器
service.interceptors.request.use(config => {
  // 在请求发送之前展示进度条
  NProgress.start()
  return config
}, error => {
  return Promise.reject(error)
})

service.interceptors.response.use(response => {
  // 在请求完成后隐藏进度条
  NProgress.done()
  return response
}, error => {
  return Promise.reject(error)
})

export default service;

2. 调用 request 发送请求，并在 config 中传入 onDownloadProgress 属性

import request from "@/utils/request";

request({
  method: 'get',
  url: '/download/file',
  responseType: 'blob',
  onDownloadProgress: progressEvent => {
    // progressEvent 为事件对象，包含 total 和 loaded 属性
    // 计算进度百分比并展示在进度条上
    const progress = progressEvent.loaded / progressEvent.total * 100
    NProgress.set(progress)
  }
}).then(res => {
  // 下载完成后的处理
}).catch(error => {
  // 下载出错后的处理
})