老夫子，我正拿着求婚书，突然听到身后一个轻柔的声音：“李哥，我这里有个Bug很久了。你能帮我看看吗？”。这是我的好朋友，伊万卡，公司新来的前端妹子。我起身向她走去。因为长时间的调试bug，我看到了自己漂亮脸上的红晕。原来人会变得温柔，一点都不像我。“我用vue中的http方法异步删除一张图片，后端接收不到我发送的参数，还报了500。”听了伊万卡妹妹描述的这种Bug的临床表现，根据我多年的医疗经验，已经大致猜到了病变的位置。但是我不想这么快结束这个免费诊所。你了解我，让她彻底了解是我的选择。老人整理好外套，端庄地坐在小姐姐的工位上，开始了我治病救人的过程：看、闻、问、切。

一：希望

在浏览器中运行这个函数，打开调试窗口，找到XHR(XMLHttpRequest)请求连接，查看Headers选项卡的底部，如下图所示

请求有效负载，请注意此数据格式。

二：气味

打开伊万卡小姐姐写的代码，终于看到了那首传奇诗的感觉。同样的26个字母，我妹妹打出来的，很漂亮。

这个。$ vux . confirm . show({ Title : ' Tip '，content: '您确定要删除此图片吗？'，OnConfirm(){即。$http({method: 'post '，url: `${that。$$baseURL}/upload/delBelowImg `，headers: { token: token，' Content-Type ' : ' application/JSON ' }，data : { file : item . filepath，id:id，name:item.name}})。然后(RES={ })；}});我发誓，上面的代码绝对是伊万卡写的，没有修改过。但是当这个片段出现在我的博文里的时候，我没有放屁的感觉。你觉得奇怪吗？

三：问

我转向写java的Trump，说：“小川奈那，把你和小妹妹伊万卡对接的这个接口的代码发给我。”。五秒钟后，我收到了以下不吸引人的代码。

@ request mapping(value='/delBelowImg ')@ Transactionalpublic void delBelowFile(@ request param MapString，Object params，Httpservlet请求请求){ try {.} catch(例外e){ 0.}} @ requestparam注意这个评论。

四：切

在这一点上，我已经知道了确切的原因，我做了一点分析。在前景阶段，我们看到伊万卡的诗一样的代码发送了一个请求，在浏览器中发送的请求的参数格式是：Request Payload。查询阶段看到小川奈那写的代码，注释是@RequestParam，结果小美发的请求数据格式和小川奈那的不统一，难怪参数不能接受。我在小姐姐代码的基础上做了以下细微的改动(标红的是改动的部分):

const data={ file : item . file path，id: id，name: item.name} this。$ vux . confirm . show({ title : ' prompt '，content: '您确定要删除此图片吗？'，OnConfirm(){即。$http({method: 'post '，url: `${that。$$baseURL}/upload/delBelowImg `，headers: { token: token，' Content-Type ' : ' application/JSON ' }，params:data })。然后(RES={ })；}});我再次打开浏览器，这次发送的参数格式变成了Query String Parameters，如下图所示

服务器成功收到参数，图片正常删除，伊万卡的小姐姐又笑了，甚至更坚定的看着我，好像在说这个男人是对的。我知道我们的革命友谊又升华了。我对尹万卡的妹妹露出了无产阶级象征性的微笑？

当伊万卡的妹妹问“为什么”时，我赶紧跑回车站。

Bug是移动的，不是人类的。你为什么兴奋地问原因

扩展：感兴趣的学生应该自己了解异步请求格式的以下差异。你应该知道有一个伊万卡的小妹妹在等你的回答，所以不要去上学。前端：请求有效负载表单数据查询字符串参数后端：@RequestParam@RequestBody

如上所述，边肖介绍的vue使用$http server无法收到详细的解释和参数的集成，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！