formData 传参 如何传数组

原因解析

HTTP 协议本身不直接支持数组

HTTP 协议中的表单数据(application/x-www-form-urlencodedmultipart/form-data)本质上是键值对结构,没有原生的数组类型。

解决

1、使用 重复相同键名
javascript 复制代码
const formData = new FormData();
const materialTypes = [3, 4];

// 直接使用相同的键名
materialTypes.forEach(type => {
  formData.append('material_type', type.toString());
});

大多数后端框架(如 Spring、Express)会自动将重复的键名解析为数组。

2、JSON 字符串格式
javascript 复制代码
const formData = new FormData();
const materialTypes = [3, 4];

// 将数组转为JSON字符串
formData.append('material_type', JSON.stringify(materialTypes));

这种方式需要后端手动解析 JSON 字符串。

3、逗号分隔字符串
javascript 复制代码
const formData = new FormData();
const materialTypes = [3, 4];

// 转为逗号分隔的字符串
formData.append('material_type', materialTypes.join(','));

后端需要用 split(',') 方法拆分字符串得到数组。

相关推荐
小江的记录本几秒前
【MyBatis-Plus】MyBatis-Plus的核心特性、条件构造器、分页插件、乐观锁插件
java·前端·spring boot·后端·sql·tomcat·mybatis
小张会进步1 分钟前
数组:二维数组
java·javascript·算法
光影少年6 分钟前
如何进行前端性能优化?
前端·性能优化
Dxy123931021612 分钟前
js如何把字符串转数字
开发语言·前端·javascript
爱写bug的野原新之助21 分钟前
爬虫之补环境:加载原型链
前端·javascript·爬虫
陈广亮29 分钟前
工具指南7-Unix时间戳转换工具
前端
NGBQ1213835 分钟前
Adobe-Premiere-Pro-2026-26.0.2.2-m0nkrus 全解析:专业视频编辑软件深度指南
前端·adobe·音视频
北城笑笑36 分钟前
Chrome:Paused in debugger 的踩坑实录:问题排查全过程与终极解决方案( 在调试器中暂停 )
前端·chrome
haorooms38 分钟前
Promise.try () 完全指南
前端·javascript
kyriewen39 分钟前
闭包:那个“赖着不走”的家伙,到底有什么用?
前端·javascript·ecmascript 6