如何在未预定义对象中新增层级？表单序列化后JSON结构构建受阻

嘿，我看你在把表单数据转成符合要求的结构化JSON这一步卡壳了——毕竟FormData默认是扁平的键值对，要转成后端需要的嵌套JSON结构确实得花点心思。咱们一步步来搞定这个问题：

核心思路 #

你的需求是把FormData的键值对转换成层级分明的JSON对象（而不是简单的数组），这样后端才能正确解析。关键在于处理表单字段的命名和嵌套结构的映射。

完整代码实现 #

我帮你完善了代码，加了一个辅助函数来处理FormData到嵌套JSON的转换：

methods: {
  // 辅助函数：把扁平的FormData键值对转成嵌套JSON对象
  formDataToNestedJson(formData) {
    const result = {};
    // 遍历FormData的所有键值对
    for (const [key, value] of formData.entries()) {
      // 把带点的键（比如"user.name"）拆分成层级数组
      const keySegments = key.split('.');
      let currentLayer = result;
      
      // 逐层创建嵌套对象
      for (let i = 0; i < keySegments.length - 1; i++) {
        const segment = keySegments[i];
        // 如果当前层级没有这个属性，就创建空对象
        if (!currentLayer[segment]) {
          currentLayer[segment] = {};
        }
        // 进入下一层级
        currentLayer = currentLayer[segment];
      }
      
      // 给最后一层的属性赋值，这里可以加类型转换逻辑
      const parsedValue = !isNaN(value) ? Number(value) : value;
      currentLayer[keySegments[keySegments.length - 1]] = parsedValue;
    }
    return result;
  },

  onSubmit: function() {
    // 从表单获取FormData
    const dataForm = new FormData(this.$refs['form']);
    // 转成结构化的JSON对象
    const structuredJson = this.formDataToNestedJson(dataForm);
    
    // 打印看看结构是否符合预期
    console.log('最终要发送的JSON:', structuredJson);

    // 发送回服务器（这里用axios为例，你也可以用fetch）
    axios.post('/your-server-endpoint', structuredJson)
      .then(res => {
        console.log('提交成功！', res.data);
        // 这里可以加成功后的逻辑，比如重置表单
      })
      .catch(err => {
        console.error('提交失败:', err);
        // 错误处理
      });
  }
}

关键细节说明 #

1. 表单字段命名规则：如果你的目标JSON是嵌套结构（比如{"user": {"name": "张三"}, "address": {"city": "上海"}}），那表单的input标签name属性要写成user.name、address.city这种带点的格式，辅助函数会自动把它们转成嵌套对象。
2. 类型转换：上面的代码里加了简单的数字转换逻辑，如果表单输入的是数字（比如年龄、金额），会自动转成Number类型，避免后端收到字符串类型的数字。
3. 扁平结构简化：如果你的JSON不需要嵌套，直接用Object.fromEntries(dataForm.entries())就能快速把FormData转成扁平的JSON对象，不用写辅助函数。

额外提示 #

如果你的表单包含文件上传，不建议转成JSON发送——直接把FormData传给后端更高效。如果后端必须要JSON格式的文件数据，那得把文件转成Base64字符串，但这种方式会增大数据体积，谨慎使用。

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