如何解決前端上傳Formdata中的file為[object?Object]的問題
更新時(shí)間：2024年07月20日 15:06:52 作者：ZhongruiRao
文件上傳是Web開發(fā)中常見的功能之一,下面這篇文章主要給大家介紹了關(guān)于如何解決前端上傳Formdata中的file為[object?Object]問題的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
項(xiàng)目場(chǎng)景：
- 前端：Vue3 + ts + elementui plus
- 后端：springboot
問題描述
在前端上傳form表單時(shí)，上傳的數(shù)據(jù)為[object Object]
同時(shí)后端報(bào)錯(cuò)：
org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'file' is not present
原因分析：
后端代碼：
public ResponseData<?> importGeoData(@RequestParam("parentAdcode") @NotNull String parentAdcode,
@RequestParam("file") MultipartFile file) throws Exception {
GeoUploadRequest uploadRequest = new GeoUploadRequest();
uploadRequest.setParentAdcode(parentAdcode);
uploadRequest.setFile(file);
return getResult(geoDataService.importGeoData(uploadRequest));
}
由于apifox中上傳正常，所以排除后端問題，檢查前端代碼
查看前端代碼：
const file = uploadFileList.value[i];
console.log(file)
formData2.append('file', file);
formData2.append('parentAdcode', formData.parentAdcode);
importObjects(formData2).then(res=>{
ElMessage.success('導(dǎo)入成功')
})
這里打印的file：
發(fā)現(xiàn)file內(nèi)部還有一個(gè)raw屬性，我們要上傳的是這個(gè)raw里面的內(nèi)容
解決方案：
更改前端代碼如下：
const file = uploadFileList.value[i];
formData2.append('file', toRaw(file.raw));
formData2.append('parentAdcode', formData.parentAdcode);
importObjects(formData2).then(res=>{
ElMessage.success('導(dǎo)入成功')
})
再次查看payload：
發(fā)送的數(shù)據(jù)正確，同時(shí)后端正確處理請(qǐng)求
總結(jié)
到此這篇關(guān)于如何解決前端上傳Formdata中的file為[object Object]問題的文章就介紹到這了,更多相關(guān)前端上傳Formdata中file為[object Object]內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue點(diǎn)擊單張圖片放大實(shí)現(xiàn)步驟(純js)
這篇文章主要給大家介紹了關(guān)于vue點(diǎn)擊單張圖片放大實(shí)現(xiàn)的相關(guān)資料,在vue項(xiàng)目中實(shí)現(xiàn)點(diǎn)擊圖片放大功能相信對(duì)大家來(lái)說(shuō)都不陌生,文中給出了詳細(xì)的js示例代碼,需要的朋友可以參考下2023-07-07
vue路由跳轉(zhuǎn)傳遞參數(shù)的方式總結(jié)
在本篇文章和里小編給各位總結(jié)了關(guān)于vue路由跳轉(zhuǎn)傳遞參數(shù)的三種方式以及相關(guān)代碼，需要的朋友們可以學(xué)習(xí)下。2020-05-05
這篇文章主要介紹了vue 條件渲染v-if和v-show，在模板中，可以根據(jù)條件進(jìn)行渲染。條件用到的是v-if、v-else-if以及v-else來(lái)組合實(shí)現(xiàn)的，有時(shí)候我們想要在一個(gè)條件中加載多個(gè)html元素，那么我們可以通過template元素上實(shí)現(xiàn)，下面就來(lái)看看具體實(shí)現(xiàn)吧2021-10-10
這篇文章主要介紹了一篇文章帶你徹底搞懂VUE響應(yīng)式原理，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可任意參考一下,需要的朋友可以參考下2022-06-06
vue data變量相互賦值后被實(shí)時(shí)同步的解決步驟
這篇文章主要介紹了vue data變量相互賦值后被實(shí)時(shí)同步的解決步驟，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-08-08
Vue實(shí)現(xiàn)動(dòng)態(tài)顯示表單項(xiàng)填寫進(jìn)度功能
這篇文章主要介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)顯示表單項(xiàng)填寫進(jìn)度功能，此功能可以幫助用戶了解表單填寫的進(jìn)度和當(dāng)前狀態(tài)，提高用戶體驗(yàn)，通常實(shí)現(xiàn)的方式是在表單中添加進(jìn)度條，根據(jù)用戶填寫狀態(tài)動(dòng)態(tài)更新進(jìn)度條，感興趣的同學(xué)可以參考下文2023-05-05
ElementUI下拉組件el-select一次從后端獲取選項(xiàng)并設(shè)置默認(rèn)值方式
這篇文章主要介紹了ElementUI下拉組件el-select一次從后端獲取選項(xiàng)并設(shè)置默認(rèn)值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
本文主要介紹了Vue前端頁(yè)面版本檢測(cè)解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2026-02-02
本篇文章主要介紹了在Vue中使用echarts的實(shí)例代碼（3種圖），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-07-07
這篇文章主要為大家介紹了Vue 2源碼解析Parse函數(shù)定義，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08