vue使用$http服务端收不到参数怎么办

这篇文章主要介绍了vue使用$http服务端收不到参数怎么办，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

一：望

在浏览器中把这个功能跑一下，打开调试窗口，找到这个XHR（XMLHttpRequest）请求连接，看Headers选项卡最下面，如下图所示

Request Payload，请注意这个数据格式。

二：闻

打开伊万卡小妹写的代码，我终于看出了传说中诗的感觉，同样26个字母，小妹敲出来的就是好看。

this.$vux.confirm.show({
title: "提示",
content: "确定要删除此图片吗？",
onConfirm() {
that.$http({
method: "post",
url: `${that.$$baseURL}/upload/delBelowImg`,
headers: {
token: token,
'Content-Type':'application/json'
},
data:{
file:item.filePath,
id:id,
name:item.name
}
}).then(res => {});
}
});

 我发誓，以上代码绝对出自伊万卡之手，分毫未改。但当这个片段出现在我博文里时屁感觉没有，你说奇怪不奇怪。

三：问

我转头看向写java的川普，说：“小川，把你和伊万卡小妹对接的这个接口，代码发我一下”。5秒中之后，我收到了如下毫无美感的代码。

@RequestMapping(value = "/delBelowImg")
@Transactional
public void delBelowFile(@RequestParam Map<String, Object> params,HttpServletRequest request){
try {
……
} catch (Exception e) {
……
} 
}

@RequestParam 注意这个注解。

四：切

到这里我已经确切的知道了病因，我略作分析，在望环节，我们看到伊万卡小妹诗一样的代码发出请求，在浏览器发送请求参数格式是：
Request Payload，在问环节，看到小川写的代码，注解是@RequestParam，所以结果是，小妹发送的请求数据格式与小川的不统一，怪不得接受不到参数。
我在小妹的代码基础上略作改动如下（标红是改动部分）：

const data = {
file:item.filePath,
id:id,
name:item.name
}
this.$vux.confirm.show({
title: "提示",
content: "确定要删除此图片吗？",
onConfirm() {
that.$http({
method: "post",
url: `${that.$$baseURL}/upload/delBelowImg`,
headers: {
token: token,
'Content-Type':'application/json'
},
params:data
}).then(res => {});
}
});

我再次打开浏览器，这次发送参数的格式成了 Query String Parameters，如下图所示

服务端成功接受到了参数，图片正常删除。

感谢你能够认真阅读完这篇文章，希望小编分享的“vue使用$http服务端收不到参数怎么办”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!