如何用FormData传递嵌套对象参数？

Question

在使用 `FormData` 传输数据时，如何正确传递嵌套对象参数是一个常见难题。由于 `FormData` 本身仅支持键值对形式的数据，直接传递如 `{ user: { name: 'Tom', age: 25 } }` 类的嵌套结构会导致后端无法正确解析。常见的解决方案是通过特定命名规则（如 `user[name]`、`user[age]`）模拟嵌套结构，使后端（如 Spring、Express 等）能将其自动映射为对象。此外，是否需要对值进行 `JSON.stringify` 处理，或使用递归函数扁平化嵌套对象，也是开发中常遇到的技术抉择。如何在不同场景下选择最优实现方式，是本文将重点探讨的问题。

Answer 1

在使用 FormData 传输数据时如何正确传递嵌套对象参数

1. 理解 FormData 的基本结构

FormData 是浏览器提供的一个用于构建表单数据的接口，通常用于通过 XMLHttpRequest 或 fetch 发送 HTTP 请求。它本质上是键值对的集合，每个值都是字符串或 Blob 类型。

例如，使用如下代码：

const formData = new FormData();
formData.append('username', 'Tom');
formData.append('age', '25');

这种方式非常适合扁平结构的数据传输，但当遇到嵌套对象时，问题就出现了。

2. 嵌套对象带来的挑战

假设我们有一个嵌套对象如下：

const data = {
  user: {
    name: 'Tom',
    age: 25
  }
};

如果我们直接使用 FormData 的 append 方法将整个对象传入：

formData.append('user', data.user);

这会导致 data.user 被转换为字符串 [object Object]，后端无法解析原始对象结构。

3. 常见解决方案一：使用命名约定模拟嵌套结构

为了使后端能正确解析嵌套对象，常见的做法是使用特定的命名规则来模拟嵌套结构。例如：

formData.append('user[name]', 'Tom');
formData.append('user[age]', '25');

这种命名方式在 Spring Boot、Express.js 等后端框架中被广泛支持，它们会自动将 user[name] 和 user[age] 映射为一个对象：

{
  "user": {
    "name": "Tom",
    "age": 25
  }
}

4. 常见解决方案二：JSON.stringify 处理整个对象

另一种方式是将整个嵌套对象序列化为 JSON 字符串：

formData.append('user', JSON.stringify(data.user));

这种方式的优点是结构清晰，后端只需反序列化即可获取完整对象。但缺点是：

• 需要后端手动处理 JSON 解析
• 不利于混合文件上传（因为文件不能被 JSON 序列化）

5. 常见解决方案三：递归扁平化嵌套对象

为了兼顾结构和兼容性，可以使用递归函数将嵌套对象“扁平化”成键值对：

function flatten(obj, parentKey = '', result = {}) {
  for (const key in obj) {
    const newKey = parentKey ? `${parentKey}[${key}]` : key;
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      flatten(obj[key], newKey, result);
    } else {
      result[newKey] = obj[key];
    }
  }
  return result;
}

const flatData = flatten(data);
// 输出：
// {
//   "user[name]": "Tom",
//   "user[age]": 25
// }

这种方式可以自动处理任意深度的嵌套结构，适用于复杂表单数据。

6. 技术抉择：如何选择最优实现方式

不同场景下适用的策略不同，以下是一个简单的对比表格：

方式	优点	缺点	适用场景
命名约定	后端自动解析、无需额外处理	手动拼接键名易出错	结构简单、后端支持命名规则（如 Spring、Express）
JSON.stringify	结构清晰、易于调试	需手动解析、不兼容文件上传	结构复杂、需传递纯数据（无文件）
递归扁平化	自动化处理、兼容性强	需要额外代码实现	任意结构嵌套、需上传文件

7. 实际开发建议与流程图

在实际开发中，建议根据以下流程选择合适的方案：

graph TD
A[是否需要上传文件] -->|是| B[使用命名约定或递归扁平化]
A -->|否| C[是否结构复杂]
C -->|是| D[使用 JSON.stringify]
C -->|否| E[使用命名约定]