如何在FormData中追加数组类型数据？多标签ID字段提交问题求解

你现在的写法问题出在FormData.append()方法的参数限制上：该方法只接受字符串或Blob类型作为值，如果你直接传入数组、对象这类引用类型，会自动调用toString()方法转换，最终就会得到你截图里的[object Object]无效值。

以下是对应解决方案，分两种常用场景：

场景1：接口支持JSON格式提交 #

这是最简单的处理方式，直接将请求头设置为application/json，把所有参数序列化后提交即可：

// 只提取需要的标签ID，不需要携带label字段
const tagsIdList = data.tags.map((item: {value: number; label: string}) => item.value)
const submitParams = {
  // 其他需要提交的字段，比如博客标题、内容等
  title: 'xxx',
  content: 'xxx',
  tags: tagsIdList
}

// 提交示例
fetch('你的接口地址', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(submitParams)
})

场景2：必须使用FormData提交（比如存在文件上传需求） #

有两种常用兼容方案：

• 方案A：将标签数组序列化为JSON字符串后提交，后端拿到后自行反序列化即可

const tagsIdList = data.tags.map(item => item.value)
details.append('tags', JSON.stringify(tagsIdList))

• 方案B：按照后端框架的数组传参约定，逐个添加数组元素（多数框架支持参数名[]的格式识别数组）

data.tags.forEach(item => {
  details.append('tags[]', item.value)
})

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