详解vue使用$http服务端收不到参数

老夫子我正在憋方案书，听到身后传来细软的声音：“李哥，我这有个Bug调了很长时间了，您能帮我看一下吗？”。说这话的是我的好朋友，公司新来的前端小妹伊万卡。我起身向她走去，看到因长时间调试Bug漂亮的脸蛋上泛起的红晕，原来人会变的温柔，一点都不像我。
“
我使用vue中的http方法异步删除一个图片，后端怎么也接收不到我发的参数，同时还报个500。
”
听完伊万卡小妹描述的这个Bug临床表现，根据我多年的行医经验，已大体猜出病灶所在。但我并不想这么快结束这次义诊，你们是了解我的,让她透彻的懂了，才是我的选择。
老夫整理下外套，端庄的坐在了小妹的工位上，开始我的治病救人过程：望、闻、问、切。

一：望

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

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

二：闻

打开伊万卡小妹写的代码，我终于看本文来源gaodai#ma#com搞@@代~&码网出了传说中诗的感觉，同样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 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，如下图所示

服务端成功接受到了参数，图片正常删除，伊万卡小妹脸上又有了笑容，连看我的眼神也更坚定了，好像再说这个男人没错。我知道我们的革命友谊又升华了。我对尹万卡小妹露出了无产阶级标志性笑容?

在伊万卡小妹问出“为什么”三个字时，我赶紧跑回了工位。

Bug是流动的
不由人的
何必激动着要理由

扩展：
有兴趣的同学请自行了解以下异步请求格式区别，要知道前方有个伊万卡小妹妹在等你解答呢，还不滚去学习。
前端：
Request Payload
Form Data
Query String Parameters
后端：
@RequestParam
@RequestBody