如何解决前端上传Formdata中的file为[object Object]的问题
更新时间：2024年07月20日 15:06:52 作者：ZhongruiRao
文件上传是Web开发中常见的功能之一,下面这篇文章主要给大家介绍了关于如何解决前端上传Formdata中的file为[object Object]问题的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
项目场景：
- 前端：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：
发送的数据正确，同时后端正确处理请求
总结
到此这篇关于如何解决前端上传Formdata中的file为[object Object]问题的文章就介绍到这了,更多相关前端上传Formdata中file为[object Object]内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue实现原理this.$message实例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
el-select与el-tree结合使用实现树形结构多选框
我们在实际开发中需要用到下拉树,elementUI是没有这个组件的,我们就要自己去写了,下面这篇文章主要给大家介绍了关于el-select与el-tree结合使用实现树形结构多选框的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了Vue3中依赖注入provide、inject的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家详细介绍了vue的插槽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要介绍了vue+django实现一对一聊天功能,主要是通过websocket，由于Django不支持websocket，所以我使用了django-channels。，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vue实现用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实现下载时暂停恢复下载,通过使用XMLHttpRequest对象来控制下载过程,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2025-01-01
这篇文章主要介绍了Vue.js 应用性能优化分析以及解决方案，VueJS 是开发网站最受欢迎、最稳定的 JavaScript 框架，但与其他框架一样，如果您忽略它，性能就会受到影响，下面我们就一起来看看怎么才能让性能提升吧2021-12-12
最新评论