vue上傳文件formData入?yún)榭?接口請(qǐng)求500的解決
long long long time no see，最近遇到個(gè)奇葩的問(wèn)題來(lái)記錄下，不知道有沒有小伙伴和我一樣崩潰過(guò)。
寫了三年代碼，上傳這么簡(jiǎn)單的功能。第一次遇到前端入?yún)romData請(qǐng)求接口報(bào)500的問(wèn)題，百度了好多資料嘗試也沒有解決。后臺(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)框架開發(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)求接口沒有formData入?yún)ⅲ恢谰唧w是什么原因。。。
請(qǐng)求頭以及請(qǐng)求參數(shù)和后臺(tái)溝通了也是一致的。。所以這種情況一直報(bào)500無(wú)法接收到前端參數(shù)，你們知道什么問(wèn)題嗎？？
next，換了一種請(qǐng)求方式，用的axios原生請(qǐng)求格式寫了一版，終于看到久違的200 ==...
接下來(lái)貼出解決的方案
方方的，這樣就解決了上傳接口的問(wèn)題。如果幫助到你們也是很開心的，以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js中使用components組件的實(shí)例講解
這篇文章主要介紹了Vue.js中使用components組件的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
一文詳解vue-router如何實(shí)現(xiàn)動(dòng)態(tài)路由
在構(gòu)建基于Vue.js的單頁(yè)面應(yīng)用（SPA）時(shí),Vue?Router是一個(gè)不可或缺的工具,本文將詳細(xì)介紹動(dòng)態(tài)路由的概念與作用及其在Vue?Router中的具體實(shí)現(xiàn),需要的可以參考下2024-11-11
本篇文章主要介紹了詳解在Vue中有條件地使用CSS類，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
ant design vue 清空upload組件圖片緩存的問(wèn)題
這篇文章主要介紹了ant design vue 清空upload組件圖片緩存的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了簡(jiǎn)述vue狀態(tài)管理模式之vuex，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
本文主要介紹了VUE 自定義取色器組件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了使用vue?v-for循環(huán)圖片路徑方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了如何在vue中使用jointjs過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
在vite項(xiàng)目中使用@進(jìn)行文件的引入方式
這篇文章主要介紹了在vite項(xiàng)目中使用@進(jìn)行文件的引入方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
教你用Vue基礎(chǔ)語(yǔ)法來(lái)寫一個(gè)五子棋小游戲
在布局上,五子棋相比那些目標(biāo)是隨機(jī)運(yùn)動(dòng)的游戲,實(shí)現(xiàn)起來(lái)相對(duì)簡(jiǎn)單許多,思路也很清晰,下面這篇文章主要給大家介紹了關(guān)于用Vue基礎(chǔ)語(yǔ)法來(lái)寫一個(gè)五子棋小游戲的相關(guān)資料,需要的朋友可以參考下2022-06-06