Angular4中FormData对象为空求助：附文件上传代码示例

嘿，别担心，你遇到的这个情况其实是浏览器控制台的一个小“坑”——直接打印FormData对象会显示为空，但你添加的数据其实已经在里面了！下面给你详细解释原因和解决办法：

为什么控制台显示FormData { }？ #

浏览器的控制台默认不会直接展示FormData的内部内容，因为FormData是一种专门用于表单数据传输的键值对集合类型，需要通过特定方法才能访问到里面的数据。你代码里的formData.append()操作其实已经成功把文件和TEST字段添加进去了，只是控制台没有直观显示出来而已。

如何验证FormData里确实有数据？ #

你可以用以下几种方法查看FormData的内容：

方法1：遍历FormData的所有键值对 #

// 在添加完数据后，添加这段遍历代码
for (let [key, value] of formData.entries()) {
  console.log(`${key}:`, value);
}

执行后就能在控制台看到每个键对应的内容：比如TEST: ujsgfsdf，photoUrl会显示对应的File对象。

方法2：单独获取某个字段的值 #

console.log('TEST字段值:', formData.get('TEST')); // 输出 ujsgfsdf
console.log('photoUrl文件:', formData.get('photoUrl')); // 输出对应的File对象

正确发送FormData请求的示例（以Angular HttpClient为例） #

如果你要把这个FormData发送到后端，确保请求的Content-Type设置正确（Angular的HttpClient会自动识别FormData并设置multipart/form-data头，无需手动指定），示例代码如下：

import { HttpClient } from '@angular/common/http';

// 在组件中注入HttpClient
constructor(private http: HttpClient) {}

showPreviewImage(event: any) { 
  if (event.target.files && event.target.files[0]) { 
    let file: File = event.target.files[0]; 
    const formData: FormData = new FormData(); 
    formData.append('photoUrl', file, file.name); 
    formData.append('TEST','ujsgfsdf'); 

    // 先验证数据是否存在
    for (let [key, value] of formData.entries()) {
      console.log(`${key}:`, value);
    }

    // 发送上传请求
    this.http.post('/your-api-upload-url', formData)
      .subscribe({
        next: (response) => console.log('上传成功:', response),
        error: (err) => console.error('上传失败:', err)
      });
  } 
}

额外注意点 #

• 确保后端接口支持multipart/form-data类型的请求，并且能正确解析photoUrl和TEST这两个字段。
• 如果是原生JS环境发送请求，不要手动设置Content-Type为multipart/form-data，否则会缺少自动生成的boundary分隔符，导致后端无法解析数据，XMLHttpRequest会自动处理这个请求头。

内容的提问来源于stack exchange，提问作者Serhio g. Lazin