long long long time no see，最近遇到個(gè)奇葩的問(wèn)題來(lái)記錄下，不知道有沒(méi)有小伙伴和我一樣崩潰過(guò)。

寫(xiě)了三年代碼，上傳這么簡(jiǎn)單的功能。第一次遇到前端入?yún)romData請(qǐng)求接口報(bào)500的問(wèn)題，百度了好多資料嘗試也沒(méi)有解決。后臺(tái)一直說(shuō)我前端的問(wèn)題，于是debugger一步一步查。

下面來(lái)看看報(bào)錯(cuò)代碼的流程，用你們的豐富經(jīng)驗(yàn)和火眼金睛幫忙看下到底錯(cuò)在哪里了？！

本項(xiàng)目用的是vue-cli3腳手架搭建，vue-admin-template后臺(tái)框架開(kāi)發(fā)。

1.首先封裝axios請(qǐng)求

如下圖所示：

2.vue文件點(diǎn)擊上傳按鈕

獲取的file文件賦值給this.file...

如下所示：

紅框內(nèi)容是formData的值，console.log(formData.get("file"))

debugger后的axios請(qǐng)求如下：

此時(shí)的formData為空對(duì)象。

network請(qǐng)求接口沒(méi)有formData入?yún)ⅲ恢谰唧w是什么原因。。。

請(qǐng)求頭以及請(qǐng)求參數(shù)和后臺(tái)溝通了也是一致的。。所以這種情況一直報(bào)500無(wú)法接收到前端參數(shù)，你們知道什么問(wèn)題嗎？？

next，換了一種請(qǐng)求方式，用的axios原生請(qǐng)求格式寫(xiě)了一版，終于看到久違的200 ==...

接下來(lái)貼出解決的方案

方方的，這樣就解決了上傳接口的問(wèn)題。如果幫助到你們也是很開(kāi)心的，以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。