下载功能实现:get请求为数组

最新推荐文章于 2025-01-03 18:00:15 发布

原创最新推荐文章于 2025-01-03 18:00:15 发布 · 264 阅读

0 ·

CC 4.0 BY-SA版权

功能专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在前端使用QS库将数组参数按后端要求转换为特定格式，如`a=b&a=c`，并展示了QS库不同数组格式的转换方法。同时，讲解了如何通过后端设置响应头，使前端能够获取到下载文件的名称，并实现文件的自动下载。重点涉及HTTP请求头的配置和响应头的暴露。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前序

问题：
1、get请求中参数为数组：根据后端的要求转化为一定的格式
2、下载的文件名称在相应头中：需要后端更改后前端在请求头中获取

数组需转换

格式要求：数组 a=[“b”,“c”] 要求格式为a=b&a=c

//安装qs
npm inistall qs --save
//引入qs(我是在请求拦截配置中更改的)
important qs from 'qs'
/**
 * 请求拦截器(拦截get处理后可直接传递数组参数)
 */
instance.interceptors.request.use(
    config => {
        if (config.method === 'get') {
            config.paramsSerializer = function(params) {
            return qs.stringify(params, { arrayFormat: 'repeat' })
            }
        }
        return config;
    }
);

知识拓展

qs转换数组如下：

1、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })//// 输出结果：'a[0]=b&a[1]=c'
2、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })// 输出结果：'a[]=b&a[]=c'
3、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })// 输出结果：'a=b&a=c'
4、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })// 输出结果：'a=b,c'

获取请求头中的参数

处理方法：需要后端处理请求头参数

//自定义响应头
ctx.res.setHeader('myheader','abc')
//通过header设置允许前端访问
ctx.res.setHeader('Access-Control-Expose-Headers', 'myheader')

                    getExportUserAction({
                        ...this.formValidate,//这是参数集合
                    }).then(res => {
                        if (!res.data) {
                            return
                        } else {
                            let url = window.URL.createObjectURL(res.data);
                            let link = document.createElement('a');
                            link.style.display = 'none';
                            link.href = url;
                            let fileName = res.headers["myheader"];//获取请求头
                            link.setAttribute('download', fileName);
                            document.body.appendChild(link);
                            link.click()
                            document.body.removeChild(link);
                            window.URL.revokeObjectURL(link.href);
                        }
                    })

参考

数组处理:qs处理参考资料