遍历对象并将内容追加至FormData（包含文件与普通文本）

这问题我之前也碰到过，手动写一堆formData.append太繁琐了，尤其是对象结构复杂的时候，写个通用的遍历工具函数就能完美解决！

核心工具函数实现 #

我们可以写一个能处理普通字段、数组、文件甚至嵌套对象的通用函数，自动把对象内容填充到FormData里：

function appendObjectToFormData(formData, obj, parentKey = '') {
  // 遍历对象的每个键值对
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      const value = obj[key];
      // 处理嵌套结构的键名（比如obj.user.name会变成'user[name]'，你的例子用不上但留着扩展）
      const currentKey = parentKey ? `${parentKey}[${key}]` : key;

      if (Array.isArray(value)) {
        // 处理数组：遍历每个元素，按后端要求添加
        value.forEach(item => {
          // 方式1：重复原键名（多数后端能自动解析为数组）
          appendObjectToFormData(formData, item, currentKey);
          // 方式2：键名加[]（比如'houses[]'，适配部分后端规则）
          // formData.append(`${currentKey}[]`, item);
        });
      } else if (value instanceof File || value instanceof Blob) {
        // 处理文件/Blob对象，直接添加
        formData.append(currentKey, value);
      } else if (typeof value === 'object' && value !== null) {
        // 递归处理嵌套对象（扩展功能）
        appendObjectToFormData(formData, value, currentKey);
      } else {
        // 普通字符串/数字等类型，直接添加
        formData.append(currentKey, value);
      }
    }
  }
}

针对你的场景实际使用 #

用你给出的data对象来测试，步骤非常简单：

// 你的原始数据对象
const data = { 
  name: 'Adrian', 
  files: [/* 这里放你的多个File上传对象 */], 
  houses: ['Mansion Q', 'Small Tini Sini House :P'] 
};

// 创建FormData实例
const formData = new FormData();

// 一键填充所有字段
appendObjectToFormData(formData, data);

// 直接用formData发起上传请求就行
fetch('/your-upload-api', {
  method: 'POST',
  body: formData
});

关键细节提醒 #

• 数组解析规则：函数默认用重复键名的方式添加数组元素（比如houses会被添加两次，键都是houses），Express、Spring Boot这类主流后端框架都能自动解析成数组；如果你的后端要求键名带[]，把数组处理的代码换成注释里的方式就行。
• 文件自动识别：函数会自动区分File/Blob对象，直接添加到FormData，不用额外处理。
• 嵌套对象兼容：如果以后你的对象有嵌套结构（比如data.user = { age: 25 }），函数也能自动转换成user[age]这种后端能识别的键名。

这样不管你的对象结构多长多复杂，都不用手动一个个写append了，一次调用全搞定！

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