vue上傳文件formData入?yún)榭?接口請(qǐng)求500的解決
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è)參考,也希望大家多多支持腳本之家。
相關(guān)文章
快速解決vue在ios端下點(diǎn)擊響應(yīng)延時(shí)的問(wèn)題
今天小編就為大家分享一篇快速解決vue在ios端下點(diǎn)擊響應(yīng)延時(shí)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08vue中watch和computed為什么能監(jiān)聽(tīng)到數(shù)據(jù)的改變以及不同之處
這篇文章主要介紹了vue中watch和computed為什么能監(jiān)聽(tīng)到數(shù)據(jù)的改變以及不同之處,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12開(kāi)啟Vue項(xiàng)目缺少node_models包的問(wèn)題及解決
這篇文章主要介紹了開(kāi)啟Vue項(xiàng)目缺少node_models包的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09element plus tree拖動(dòng)節(jié)點(diǎn)交換位置和改變層級(jí)問(wèn)題(解決方案)
圖層list里有各種組件,用element plus的tree來(lái)渲染,可以把圖片等組件到面板里,面板是容器,非容器組件,比如圖片、文本等,就不能讓其他組件拖進(jìn)來(lái),這篇文章主要介紹了element plus tree拖動(dòng)節(jié)點(diǎn)交換位置和改變層級(jí)問(wèn)題(解決方案),需要的朋友可以參考下2024-04-04vue+elementui實(shí)現(xiàn)點(diǎn)擊table中的單元格觸發(fā)事件--彈框
這篇文章主要介紹了vue+elementui實(shí)現(xiàn)點(diǎn)擊table中的單元格觸發(fā)事件--彈框,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07