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(',') 方法拆分字符串得到数组。

相关推荐
想睡好1 天前
setup
前端·javascript·html
桜吹雪1 天前
DeepSeekV3.2模型内置Agent体验
javascript·人工智能
逆向新手1 天前
js逆向-某省特种设备aes加密研究
javascript·爬虫·python·逆向·js
光影少年1 天前
react navite相比较传统开发有啥优势?
前端·react.js·前端框架
岁月宁静1 天前
软件开发工程师如何借助 AI 工具进行软件自测
前端·ai编程·测试
我爱学习_zwj1 天前
动态HTTP服务器实战:解析请求与Mock数据
开发语言·前端·javascript
NMBG221 天前
外卖综合项目
java·前端·spring boot
小白阿龙1 天前
样式不生效/被覆盖(CSS优先级陷阱)
前端·css
flashlight_hi1 天前
LeetCode 分类刷题:110. 平衡二叉树
javascript·算法·leetcode
Beginner x_u1 天前
Vue 事件机制全面解析:原生事件、自定义事件与 DOM 冒泡完全讲透
前端·javascript·vue.js·dom