如何解決前端上傳Formdata中的file為[object?Object]的問題
更新時間：2024年07月20日 15:06:52 作者：ZhongruiRao
文件上傳是Web開發(fā)中常見的功能之一,下面這篇文章主要給大家介紹了關(guān)于如何解決前端上傳Formdata中的file為[object?Object]問題的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
項目場景：
- 前端：Vue3 + ts + elementui plus
- 后端：springboot
問題描述
在前端上傳form表單時，上傳的數(shù)據(jù)為[object Object]
同時后端報錯：
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)部還有一個raw屬性，我們要上傳的是這個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ù)正確，同時后端正確處理請求
總結(jié)
到此這篇關(guān)于如何解決前端上傳Formdata中的file為[object Object]問題的文章就介紹到這了,更多相關(guān)前端上傳Formdata中file為[object Object]內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue實現(xiàn)原理this.$message實例詳解
這篇文章主要介紹了vue實現(xiàn)原理this.$message實例詳解,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
el-select與el-tree結(jié)合使用實現(xiàn)樹形結(jié)構(gòu)多選框
我們在實際開發(fā)中需要用到下拉樹,elementUI是沒有這個組件的,我們就要自己去寫了,下面這篇文章主要給大家介紹了關(guān)于el-select與el-tree結(jié)合使用實現(xiàn)樹形結(jié)構(gòu)多選框的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue3中依賴注入provide、inject的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細介紹了vue的插槽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue+django實現(xiàn)一對一聊天功能的實例代碼
這篇文章主要介紹了vue+django實現(xiàn)一對一聊天功能,主要是通過websocket，由于Django不支持websocket，所以我使用了django-channels。，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2019-07-07
這篇文章主要介紹了vue實現(xiàn)用v-bind給src和href賦值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
element-ui vue input輸入框自動獲取焦點聚焦方式
這篇文章主要介紹了element-ui vue input輸入框自動獲取焦點聚焦方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue resource post請求時遇到的坑,需要的朋友可以參考下2017-10-10
本文主要介紹了Vue.js實現(xiàn)下載時暫?；謴?fù)下載,通過使用XMLHttpRequest對象來控制下載過程,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
Vue.js 應(yīng)用性能優(yōu)化分析+解決方案
這篇文章主要介紹了Vue.js 應(yīng)用性能優(yōu)化分析以及解決方案，VueJS 是開發(fā)網(wǎng)站最受歡迎、最穩(wěn)定的 JavaScript 框架，但與其他框架一樣，如果您忽略它，性能就會受到影響，下面我們就一起來看看怎么才能讓性能提升吧2021-12-12