vue上传文件formData入参为空,接口请求500的解决

long long long time no see,最近遇到个奇葩的问题来记录下,不知道有没有小伙伴和我一样崩溃过。

写了三年代码,上传这么简单的功能。第一次遇到前端入参fromData请求接口报500的问题,百度了好多资料尝试也没有解决。后台一直说我前端的问题,于是debugger一步一步查。

下面来看看报错代码的流程,用你们的丰富经验和火眼金睛帮忙看下到底错在哪里了?!

本项目用的是vue-cli3脚手架搭建,vue-admin-template后台框架开发。

1.首先封装axios请求

如下图所示:

vue上传文件formData入参为空,接口请求500的解决_第1张图片

vue上传文件formData入参为空,接口请求500的解决_第2张图片

2.vue文件点击上传按钮

获取的file文件赋值给this.file...

如下所示:

vue上传文件formData入参为空,接口请求500的解决_第3张图片

红框内容是formData的值,console.log(formData.get("file"))

vue上传文件formData入参为空,接口请求500的解决_第4张图片

debugger后的axios请求如下:

vue上传文件formData入参为空,接口请求500的解决_第5张图片

此时的formData为空对象。

network请求接口没有formData入参,不知道具体是什么原因。。。

vue上传文件formData入参为空,接口请求500的解决_第6张图片

请求头以及请求参数和后台沟通了也是一致的。。所以这种情况一直报500无法接收到前端参数,你们知道什么问题吗??

next,换了一种请求方式,用的axios原生请求格式写了一版,终于看到久违的200 ==...

接下来贴出解决的方案

vue上传文件formData入参为空,接口请求500的解决_第7张图片

vue上传文件formData入参为空,接口请求500的解决_第8张图片

方方的,这样就解决了上传接口的问题。如果帮助到你们也是很开心的,以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

你可能感兴趣的:(vue上传文件formData入参为空,接口请求500的解决)