FormData 与 JSON 转换

FormData 是浏览器提供的宿主对象，适合表示表单字段和文件数据；JSON 更适合表达结构化业务数据。两者在接口请求、表单提交和文件上传中经常需要互转。

FormData 转 JSON

适合表单数据中只有普通文本字段、不包含文件对象的场景。

const formData = new FormData(formElement)
const jsonData = {}

formData.forEach((value, key) => {
  jsonData[key] = value
})

console.log(jsonData)

封装为函数

function formDataToObject(formData) {
  return Object.fromEntries(formData)
}

注意事项

• FormData 的值可能是 string 或 File。
• 如果存在同名字段，直接赋值会被后面的值覆盖。
• 如果表单里有文件，直接转 JSON 通常不合适。

保留同名字段

如果需要保留多选框、数组字段等同名值，应该手动聚合。

const formData = new FormData(formElement)
const jsonData = {}

formData.forEach((value, key) => {
  if (key in jsonData) {
    const current = jsonData[key]
    jsonData[key] = Array.isArray(current) ? [...current, value] : [current, value]
    return
  }

  jsonData[key] = value
})

JSON 转 FormData

适合把普通对象组装成 multipart/form-data 请求体。

const jsonData = {
  id: 1,
  name: 'foo',
}

const formData = new FormData()

for (const key in jsonData) {
  if (Object.hasOwn(jsonData, key)) {
    formData.append(key, jsonData[key])
  }
}

console.log(formData)

封装为函数

function objectToFormData(data) {
  const formData = new FormData()

  for (const [key, value] of Object.entries(data)) {
    if (value == null) continue
    formData.append(key, value instanceof Blob ? value : String(value))
  }

  return formData
}

FormData.append() 只接受字符串或 Blob（包括 File）。对象和数组需要先自行序列化；null、undefined 通常不应作为表单字段提交。

包含文件时的常见写法

const formData = new FormData()

formData.append('name', 'foo')
formData.append('avatar', fileInput.files[0])

使用建议

• 纯业务数据优先使用 JSON。
• 需要上传文件时优先使用 FormData。
• fetch 或 XMLHttpRequest 发送 FormData 时，不要手动设置 Content-Type，交给浏览器自动处理。