前端如何使用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