如何将包含File对象的多层嵌套结构正确发送至后端？

方案1：带层级索引的字段命名（优先推荐） #

绝大多数主流后端框架（Spring Boot、Express、Django、Laravel等）都支持解析带数组索引、对象点语法的FormData字段名，你只需要递归遍历原始数据，给每个字段生成对应层级的命名即可，后端可以直接解析得到和你原始结构完全一致的嵌套对象，无需额外映射。

• 字段命名规则：第n个layer下第m个trait的file字段命名为 layers[n].traits[m].file，普通字段同理，比如顶层name字段直接用name，第0个layer的name字段用layers[0].name
  代码示例：

function buildFormData(formData, data, parentKey = '') {
  // 处理对象类型
  if (data && typeof data === 'object' && !(data instanceof File) && !(data instanceof Date)) {
    Object.keys(data).forEach(key => {
      const fullKey = parentKey ? `${parentKey}.${key}` : key;
      buildFormData(formData, data[key], fullKey);
    });
  // 处理数组类型
  } else if (Array.isArray(data)) {
    data.forEach((item, index) => {
      const fullKey = `${parentKey}[${index}]`;
      buildFormData(formData, item, fullKey);
    });
  // 基础类型/File直接追加
  } else {
    if (data !== undefined && data !== null) {
      formData.append(parentKey, data);
    }
  }
}

// 调用示例
const rawData = {
  name: "项目名称",
  layers: [{
    name: "图层1",
    traits: [{ name: "特征1", file: 文件对象1 }, { name: "特征2", file: 文件对象2 }]
  }]
}
const formData = new FormData();
buildFormData(formData, rawData);
// 后续直接用axios/fetch提交formData即可

方案2：元数据+文件映射（全场景兼容） #

如果后端不支持自动解析嵌套格式的FormData字段，可以将文件和普通元数据分离提交，通过唯一标识关联两者：

1. 递归遍历原始数据，把所有File对象替换为唯一ID，同时把ID和对应的File存到映射表
2. 把替换完File的整个数据序列化为JSON字符串，作为metadata字段追加到FormData
3. 遍历映射表，把每个File用对应的ID作为字段名追加到FormData
4. 后端拿到数据后先解析metadata得到结构，再按ID匹配对应File即可
   代码示例：

const formData = new FormData();
const fileMap = new Map();
let fileSeq = 0;

function processRawData(obj) {
  if (obj instanceof File) {
    const fileId = `f_${fileSeq++}`;
    fileMap.set(fileId, obj);
    return fileId;
  }
  if (Array.isArray(obj)) return obj.map(item => processRawData(item));
  if (typeof obj === 'object' && obj !== null) {
    const res = {};
    for (const k in obj) res[k] = processRawData(obj[k]);
    return res;
  }
  return obj;
}

const processedMeta = processRawData(rawData);
formData.append('metadata', JSON.stringify(processedMeta));
fileMap.forEach((file, id) => formData.append(id, file));

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