JavaScript如何将对象数组转换为form-data格式

核心规则 #

服务端通常可自动识别的数组对象FormData键名格式为 数组前缀[索引].属性名，针对你给出的示例数据，最终生成的键会是obj[0].name、obj[0].age、obj[1].name等格式，主流后端框架（SpringBoot、Express、Django等）都支持自动解析为对应的对象数组结构。

通用实现代码 #

/**
 * 对象数组转FormData通用方法
 * @param {Array} array 待转换的对象数组
 * @param {String} prefix 数组参数前缀，对应后端接收的参数名
 * @returns {FormData}
 */
function arrayToFormData(array, prefix) {
  const formData = new FormData()
  array.forEach((item, index) => {
    // 遍历对象的每个属性
    Object.entries(item).forEach(([key, value]) => {
      // 拼接符合规范的键名
      const formKey = `${prefix}[${index}].${key}`
      // 特殊类型可自定义序列化规则，这里默认处理基础类型
      formData.append(formKey, typeof value === 'object' && value !== null ? JSON.stringify(value) : value)
    })
  })
  return formData
}

针对你的示例的调用方法 #

const obj = [{ name: 'Sergio' , age: 16 } , { name: 'Ivan' , age: 24 }]
// 传入数组和参数前缀，这里前缀用obj和你的变量名保持一致，可按需修改
const formData = arrayToFormData(obj, 'obj')

// 可打印验证结果
for(let [k,v] of formData.entries()) {
  console.log(k, v)
}

输出结果：

obj[0].name Sergio
obj[0].age 16
obj[1].name Ivan
obj[1].age 24

注意事项 #

• 如果你的后端有特殊的键名约定，比如用obj[]不带索引的格式，直接修改拼接键名的逻辑即可适配
• 遇到属性值是嵌套对象的场景，可以扩展逻辑做递归处理
• 提前过滤掉值为null/undefined的属性，避免提交无效参数

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