向FormData追加对象数组后后台收到[object Object]如何解决

问题原因 #

FormData.append() 方法仅支持传入字符串、Blob/File类型作为值，如果你直接传入普通对象，JS会自动调用对象的toString()方法做转换，最终就会得到[object Object]的结果。

解决方案 #

这里提供两种常用方案，你可以根据前后端的适配成本选择：

方案1：JSON序列化后传递（前端改动量小） #

前端把每个code对象序列化为JSON字符串再加入FormData，后端拿到codes数组后，遍历每个元素做JSON反序列化即可得到原对象结构。
修改后的代码如下：

async submit(el, codes = null) {
        try {
            const formData = new FormData(el);

            if (codes) {
                for (let i = 0; i < codes.length; i++) {
                    // 序列化对象为JSON字符串
                    formData.append('codes[]', JSON.stringify(codes[i]));
                }
            }

            const response = await http({
                method: el.method,
                url: el.action,
                data: formData,
            });
    } catch(e) {
        // 补充你的错误处理逻辑
    }
}

方案2：手动拼接嵌套键名（后端无需额外适配） #

按照后端解析FormData的规则，手动把嵌套对象的属性拼接到键名中，后端可以直接解析出你期望的数组结构，不需要额外做序列化处理。
修改后的代码如下：

async submit(el, codes = null) {
        try {
            const formData = new FormData(el);

            if (codes) {
                for (let i = 0; i < codes.length; i++) {
                    // 遍历当前code对象的所有属性，拼接成符合后端解析规则的键名
                    Object.entries(codes[i]).forEach(([field, value]) => {
                        formData.append(`codes[${i}][${field}]`, value);
                    })
                }
            }

            const response = await http({
                method: el.method,
                url: el.action,
                data: formData,
            });
    } catch(e) {
        // 补充你的错误处理逻辑
    }
}

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