vue上傳文件formData入?yún)榭?接口請求500的解決
long long long time no see，最近遇到個(gè)奇葩的問題來記錄下，不知道有沒有小伙伴和我一樣崩潰過。
寫了三年代碼，上傳這么簡單的功能。第一次遇到前端入?yún)romData請求接口報(bào)500的問題，百度了好多資料嘗試也沒有解決。后臺一直說我前端的問題，于是debugger一步一步查。
下面來看看報(bào)錯(cuò)代碼的流程，用你們的豐富經(jīng)驗(yàn)和火眼金睛幫忙看下到底錯(cuò)在哪里了？！
本項(xiàng)目用的是vue-cli3腳手架搭建，vue-admin-template后臺框架開發(fā)。
1.首先封裝axios請求
如下圖所示：
2.vue文件點(diǎn)擊上傳按鈕
獲取的file文件賦值給this.file...
如下所示：
紅框內(nèi)容是formData的值，console.log(formData.get("file"))
debugger后的axios請求如下：
此時(shí)的formData為空對象。
network請求接口沒有formData入?yún)?，不知道具體是什么原因。。。
請求頭以及請求參數(shù)和后臺溝通了也是一致的。。所以這種情況一直報(bào)500無法接收到前端參數(shù)，你們知道什么問題嗎？？
next，換了一種請求方式，用的axios原生請求格式寫了一版，終于看到久違的200 ==...
接下來貼出解決的方案
方方的，這樣就解決了上傳接口的問題。如果幫助到你們也是很開心的，以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
快速解決vue在ios端下點(diǎn)擊響應(yīng)延時(shí)的問題
今天小編就為大家分享一篇快速解決vue在ios端下點(diǎn)擊響應(yīng)延時(shí)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Vue兼容ie9的問題全面解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
vue中watch和computed為什么能監(jiān)聽到數(shù)據(jù)的改變以及不同之處
這篇文章主要介紹了vue中watch和computed為什么能監(jiān)聽到數(shù)據(jù)的改變以及不同之處,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
開啟Vue項(xiàng)目缺少node_models包的問題及解決
這篇文章主要介紹了開啟Vue項(xiàng)目缺少node_models包的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
element plus tree拖動節(jié)點(diǎn)交換位置和改變層級問題(解決方案)
圖層list里有各種組件,用element plus的tree來渲染,可以把圖片等組件到面板里,面板是容器,非容器組件,比如圖片、文本等,就不能讓其他組件拖進(jìn)來,這篇文章主要介紹了element plus tree拖動節(jié)點(diǎn)交換位置和改變層級問題(解決方案),需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue自定義全局組件(自定義插件)的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
vue+elementui實(shí)現(xiàn)點(diǎn)擊table中的單元格觸發(fā)事件--彈框
這篇文章主要介紹了vue+elementui實(shí)現(xiàn)點(diǎn)擊table中的單元格觸發(fā)事件--彈框，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)記事本小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
本篇文章來講解渲染函數(shù) & JSX，Vue 推薦在絕大多數(shù)情況下使用模板來創(chuàng)建你的 HTML。然而在一些場景中，你真的需要 JavaScript 的完全編程的能力。這時(shí)我們可以用渲染函數(shù)，它比模板更接近編譯器,需要的朋友可以參考一下2021-09-09
本篇文章主要介紹了關(guān)于Vue的路由權(quán)限管理的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03