如何正确将对象数组存入FormData并输出预期结构数据

问题根源 #

你的代码存在两个关键问题：

1. items.push() 返回的是数组的新长度，而非插入的对象。你用 formData.append('items', items.push(...)) 实际是把数组长度的数字添加到了FormData中，而非目标对象。
2. FormData仅支持存储字符串或Blob类型数据，无法直接保存JavaScript对象。即使强行存入对象，也会被转为[object Object]这类无意义字符串，无法保留结构。

解决方案1：直接构建最终数据对象（推荐） #

无需通过FormData处理对象数组，直接将普通表单字段与构建好的items数组合并成最终数据结构：

const formEL = document.querySelector('#order')

formEL.addEventListener('submit', ev => {
    ev.preventDefault()

    const formData = new FormData(formEL)
    // 提取表单中的普通字段（若有）
    const basicData = Object.fromEntries(formData)
    
    const skuList = formData.getAll('sku')
    const quantityList = formData.getAll('quantity')
    const items = []

    for (let i = 0; i < skuList.length; i++) {
        items.push({
            sku: skuList[i],
            quantity: quantityList[i]
        })
    }
    
    // 合并为最终数据对象
    const data = {
        ...basicData,
        items
    }
    
    console.log(items)
    console.log(data)
})

解决方案2：将数组序列化为JSON存入FormData（适用于需提交后端场景） #

如果必须通过FormData传递数据，需把items数组转为JSON字符串，后端再解析还原：

const formEL = document.querySelector('#order')

formEL.addEventListener('submit', ev => {
    ev.preventDefault()

    const formData = new FormData(formData)

    const skuList = formData.getAll('sku')
    const quantityList = formData.getAll('quantity')
    const items = []

    for (let i = 0; i < skuList.length; i++) {
        items.push({
            sku: skuList[i],
            quantity: quantityList[i]
        })
    }
    
    // 把数组序列化为JSON字符串存入FormData
    formData.append('items', JSON.stringify(items))
    
    console.log(items)
    // 解析JSON字符串还原数组
    const data = Object.fromEntries(formData)
    data.items = JSON.parse(data.items)
    
    console.log(data)
})

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