upload上传文件 formData变成[object,object]

星夜辰

已于 2022-01-20 22:13:10 修改

阅读量1.7w

点赞数 3

分类专栏： 1.开发问题解决文章标签：前端 vue.js javascript elementui

于 2022-01-11 14:12:20 首次发布

本文链接：https://blog.csdn.net/u013791936/article/details/122430767

版权

1.开发问题解决专栏收录该内容

12 篇文章

订阅专栏

本文探讨了前端文件上传过程中遇到的问题，特别是使用formData时文件被错误地显示为[object Object]而非二进制形式的情况。分析了多种场景下的解决方案，包括单文件、多文件上传及特定框架下的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端上传文件，浏览器里显示成file参数为[object object ]形式，而不是（binary）

原因分析：formData未能转化成二进制对象，变成了普通对象。

1.element upload上传

vue-resource+element upload上传（遇到formData总是变为object格式） - 饭米雪 - 博客园https://www.cnblogs.com/fmixue/p/9968910.html

2.多文件上传

formData上传多文件错误请求显示[object]_奔跑的web的博客-CSDN博客** 使用formData进行post请求时候上传多个文件变为一个数组传递给后台的时候变为[object]问题**post 请求错误的成为了错误的原因是使用formData上传文件时候，传递多个文件变为数组就会出现这个问题，解决的方法具体如下做一个for循环把多个上传文件一个个传递就可以解决上述问题。...https://blog.csdn.net/weixin_47561793/article/details/112601719

多文件上传还可以参考数组上传方式，使用JSON.stringify()处理

3.请求协议错误


let formData = new FormData();
formData.append("fileType",1);//后端接口参数
formData.append("file",file);//后端接口参数
//formData.append("file",JSON.stringify(file));


axios({
  method: 'post',
  url: 'http://localhost:8080/upload',  
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  data:formData
})

4.postman成功，代码上传失败

~~解决：JSON.stringify() JSON.parse() 使用 JSON转换~~

5.antd vue3 文件上传

Ant Design Vuehttps://2x.antdv.com/components/upload-cn/#Upload-在vue3，ts项目中，使用antd UI库遇到此问题。

原因：未完全按照示例代码编写，漏写文件类型，导致不能转化二进制对象binary

interface FileItem {
  uid: string;
  name?: string;
  status?: string;
  response?: string;
  url?: string;
}

interface FileInfo {
  file: FileItem;
  fileList: FileItem[];
}