Vue中创建FormData实例后console.log打印结果为空是什么原因？

问题原因 #

FormData 是浏览器提供的特殊可迭代容器对象，不属于普通JS对象结构，直接调用console.log()打印时，浏览器控制台默认不会序列化解析其内部存储的键值对，因此会出现你看到的输出为[]的情况，你代码里的FormData赋值操作本身是成功的，数据已经存入实例中。

验证方法 #

你可以通过以下两种方式确认FormData内的内容：

• 读取单个字段验证：调用FormData实例的get()方法即可取出对应键的值：

console.log(filedata.get('name')) // 输出你存入的 'my-file'
console.log(filedata.get('file')) // 输出你存入的文件对象

• 遍历所有字段验证：

// 遍历输出所有键值对
for (const [key, value] of filedata.entries()) {
  console.log(key, value)
}
// 也可以转成普通对象一次性查看全部内容
console.log(Object.fromEntries(filedata.entries()))

上传注意事项 #

你当前的FormData构造逻辑没有问题，触发上传请求时只要注意两点即可正常提交文件：

1. 不要手动给请求设置Content-Type: multipart/form-data头，浏览器会自动生成带boundary分隔符的正确请求头，手动设置反而会导致后端无法正常解析文件
2. 确认this.file是原生File对象：如果你是用ElementUI、AntD Vue等组件库的上传组件拿到的文件对象，需要取其raw属性对应的原生文件对象，避免被Vue响应式代理影响：

let file = this.file.raw || this.file

内容的提问来源于stack exchange，提问作者Yusup S