VueJS如何使用axios.post()或者axios.get()请求下载文件、音频、视频？并且显示下载进度，后端是SpringBoot

前端如何使用axios下载文件呢？最近遇到了前端下载音频及文件的功能，记录下，因为通过传统的window.location.href=xxx链接下载不能携带Token参数，后端无法验证请求放行，所以就用了axios。前端下载需要注意的是axios.interceptors.request的拦截器不要设置响应超时设置，不然由于网速慢，文件还没下载完就中断了。

下面是axios的HTTP请求的统一封装方法，数据接收使用了Blob对象：

    import axios from 'axios';

    let base = '/api';

    /**
     * 文件下载请求封装方法，POST请求
     *
     * @param this_ 外部this对象，用于更新下载进度
     * @param url 请求API
     * @param params 参数对象
     * @returns {Promise<AxiosResponse<T>>} Promise
     */
    downloadFileRequestPost: (this_, url, params) => {
        return axios.post(base + url, params, {
            responseType: 'blob',
            headers: {
                'Authorization': "Bearer " + window.sessionStorage.getItem('token')//设置token
            },
            onDownloadProgress: function (progressEvent) {//允许为下载处理进度事件
                this_.$nextTick(() => {//下载进度计算，这里使用Vuejs的$nextTick函数，请自行百度其作用
                    this_.downloadProgress = parseInt(100 * (progressEvent.loaded / progressEvent.total));
                });
            }
        });
    },
    
    /**
     * 文件下载请求封装方法，GET请求
     *
     * @param this_ 外部this对象，用于更新下载进度
     * @param url 请求API
     * @param params 参数对象
     * @returns {Promise<AxiosResponse<T>>} Promise
     */
    downloadFileRequestGet: (this_, url, params) => {
        return axios.get(base + url, {
            params: params,
            responseType: 'blob',
            headers: {
                'Authorization': "Bearer " + window.sessionStorage.getItem('token')//设置token
            },
            onDownloadProgress: function (progressEvent) {//允许为下载处理进度事件
                this_.$nextTick(() => {//下载进度计算，这里使用Vuejs的$nextTick函数，请自行百度其作用
                    this_.downloadProgress = parseInt(100 * (progressEvent.loaded / progressEvent.total));
                });
            }
        });
    }

以下是Vue组件页面的调用示例，HTML部分就不完整放出来了，进度条用了el-progress组件：

<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-form :inline="true" style="float: left;margin-top: 9px;">
                    <el-form-item>
                        <el-button v-if="downloadProgress===0||downloadProgress===100" type="success"
                                   @click="goDownBatch()" icon="el-icon-finished">批量打包下载
                        </el-button>
                        <el-progress type="circle" v-else
                                     :width="40" :percentage="downloadProgress" status="success"></el-progress>
                    </el-form-item>
                    <div v-if="downloadProgress===0||downloadProgress===100">
                        <el-button @click="downloadFile(scope.row)"
                                   type="text" size="small">下载
                        </el-button>
                    </div>
                    <el-progress type="circle" v-else :width="40" :percentage="downloadProgress" status="success"></el-progress>
                </el-form>
            </el-col>
        </el-row>
    </div&g