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';