解决前端上传Formdata中的file为[object Object]的问题
ZhongruiRao 2024-06-17 17:03:02 阅读 93
项目场景:
前端:Vue3 + ts + elementui plus
后端:springboot
问题描述
在前端上传form表单时,上传的数据为[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('导入成功') })
这里打印的file:
发现file内部还有一个raw属性,我们要上传的是这个raw里面的内容
解决方案:
更改前端代码如下:
const file = uploadFileList.value[i]; formData2.append('file', toRaw(file.raw)); formData2.append('parentAdcode', formData.parentAdcode); importObjects(formData2).then(res=>{ ElMessage.success('导入成功') })
再次查看payload:
发送的数据正确,同时后端正确处理请求
上一篇: Unable to start web server; nested exception is org.springframework.context.ApplicationContextExcept
下一篇: Vue3中的refs使用
本文标签
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。