java前后分離使用fetch上傳文件失敗500

這次不是寫什么技術要點，僅僅是記錄一下 最近遇到的一個問題

 

背景

使用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，不要設置！不要設置！！