java前后分离使用fetch上传文件失败500

Posted 2021-01-16 巽秋

这次不是写什么技术要点，仅仅是记录一下 最近遇到的一个问题

 

背景

使用fetch向java后台上传文件时，前端调试报错500,后端的报错为multipart 无法解析，翻译过来大概是这个意思。

由于本人不会java所以这里只是记录一下前端的注意事项。

 

原因

问题的主要原因在于，我在上传时设置了contenttype，这里就不得不提一下，fetch中由于之前使用的时候如果我不设置contenttype那么我向后端传送json时就会报错。

因为contenttype本来就是用于设置http的格式的，所以我在上传之前手动的在配置里设置了contenttype 为 multipart/form-data。

没想到问题就出在这里，当我们手动设置后fetch将不再为form-data自动添加文件边界，所以造成后端无法解析。

其实这个问题在使用ajax时也是存在的，不知道大家记不记得在使用jq的ajax上传时要设置这样的两个属性：

contentType: false, // false即不设置contenttype
processData: false // 是否对参数进行序列化处理

contentType设为false即不设置本次http请求的contentType，而下面的processData则是不让jq处理我们在data中添加的数据，

否则ajax会在传输之前使用JSON.stringify()方法帮我们将数据转为json字符串

 

解决

最后的fetch上传成功的配置如下：

var options  = {
                "method": ‘post‘,
                "credentials": "include",
                "headers": {
                    ‘Accept‘: ‘application/json‘
                }
            };

 

上传时千万不要自己设置contenttype，不要设置！不要设置！！