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_.downloa

猜你喜欢

转载自blog.csdn.net/qq_35624642/article/details/103449964