React提交FormData到Django后端时cityName字段显示[object Object]是什么原因？

FormData 接口的 append() 方法仅支持直接传入字符串、Blob 或 File 类型的参数，若传入其他类型的值，会被自动调用 toString() 方法做强制类型转换。
你直接将 doc 这个对象数组作为参数传入 append() 方法，普通对象执行 toString() 后的返回结果就是 [object Object]，因此 Django 后端解析后就会得到这个异常值。

你可以选择以下任意一种方案处理：

• 方案1：序列化对象数组为JSON字符串后上传
  前端修改 append 逻辑，先把对象数组转为JSON字符串再传入：

  form_data.append("cityName", JSON.stringify(doc));
  

  后端 Django 侧拿到字段值后，做JSON反序列化即可还原原数组：

  import json
  city_list = json.loads(request.data.get("cityName"))
  

• 方案2：拆分数组项逐个提交
  遍历数组按索引拆分字段提交，适合不需要JSON解析的场景：

  doc.forEach((item, idx) => {
    form_data.append(`cityName[${idx}].form`, item.form)
    form_data.append(`cityName[${idx}].city`, item.city)
  })
  

  后端可以按索引直接读取对应字段的值。

注意：使用 axios 提交 FormData 时无需手动设置 Content-Type: multipart/form-data 请求头，axios 检测到数据为 FormData 实例时会自动补全请求头和分隔符 boundary，手动设置反而可能丢失 boundary 导致后端解析失败。

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