axios参数后端获取问题

axios正常的和后端接口对接请看官方文档。下面介绍的是axios导出时候后端获取参数的解决方案。

问题：axios导出excel问题。以post方法请求接口。返回responseType是blob流数据前端浏览器下载。

遇到后端接收参数问题：

1.使用 request.getParameter() 方法接收不到前端的参数值问题；前端参数是键值对形式 key value 

2.使用：

// 获取所有参数
Enumeration<String> parameterNames = request.getParameterNames();
// 获取数据
HashMap param = SysJson.toHashMap(SysString.toString(parameterNames.nextElement()));
//文件名称
String sTitle = SysString.getMapStr(param, "title");

这种方式能获取到值；但是参数值比较大，获取到的参数值少了一部分。前端参数是一整个字符串：大括号{} 这种。大括号中是key value 这样的格式。

问题定位：前端axios传参问题。

打开浏览器F12看接口的参数形式如果是 Request Payload 形式传的参数，这个暂时不知道后端要怎么获取这样的参数。正常的都是 Form Data 形式传的参数。

问题解决方案：公共的axios导出方法中设置参数，使其以Form Data 形式传参。如下：

axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';

设置Content-Type可以使传参形式以Form Data 传入后端，后端可以通过上面提到的两种方式获得到参数。

问题解决方案重点：

前端传参是data属性，公共导出方法设置属性时不要对data的值转字符串处理

data: JSON.stringify(option.data),

定义

var postData = new URLSearchParams();//定义这个属性
postData.append('exceldatas', JSON.stringify(excel_));//对这个属性塞你需要传的键值对，值是数组形式需要stringfy一下

postData 就是data 的值  data: postData

这样后端就能够正常使用 request.getParameter() 方法获取参数值。

参考例子：

公共导出方法：重点部分代码：

axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';
this.axios({
    method: option.type ? option.type : 'post',
    url: option.url,
    data: option.data,//这个地方不要 data: JSON.stringify(option.data) 
    responseType: 'blob',
    onDownloadProgress: function (e) {
        var progress = parseInt((e.loaded / e.total) * 100);
        option.progress ? option.progress(progress) : '';
        if (progress === 100) {
            //回调
            option.callBack ? option.callBack() : '';
        }
    }
})

调用的js部分重点代码：

//参数
var postData = new URLSearchParams();//这个是重点
//这个是需要传的参数。参数值是数组需要JSON.stringify()
postData.append('exceldatas', JSON.stringify(excel_));//excel_ 是参数值
var args = {
    url: url,
    fileName: '报表' + _this.sysDate.getDate('YYYY-MM-DD') + '.xlsx',
    streamType: 'excel',
    data: postData 
};
this.download(args);//调用公共导出方法

后端获取参数：

参数是数组形式数据，JSON是 com.alibaba.fastjson

JSONArray exceldatas = JSON.parseArray(request.getParameter("exceldatas"))

参数是正常字符串：则直接使用 request.getParameter("key") 获取。

友情提示：使用 var postData = new URLSearchParams() 这样传参后，公共导出方法不设置Content-Type好像也没有任何问题。axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';

标签：axios,option,postData,获取,JSON,参数,data
来源： https://blog.csdn.net/hongchenghong/article/details/121817484