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

相关推荐
刘较瘦_14 分钟前
AI 开发中的 Git Submodule 父子仓库模式:前后端分仓管理与协作实践
前端·github
牧艺27 分钟前
cos-design WeatherBackground:用 Canvas 做一个「会变天」的背景引擎
前端·canvas·视觉设计
OpenTiny社区31 分钟前
深度解析 LSP 如何为 AI 装上“眼睛”
前端·ai编程
布列瑟农的星空40 分钟前
流程类SVG画布的通用开发范式
前端
fsssb43 分钟前
Chromium 源码学习笔记(七):那些跨进程的调用,底下都是同一个东西——Mojo
前端
gis开发之家1 小时前
《Vue3 从入门到大神35篇》Vue3 源码详解(五):effect 依赖收集原理——track 与 trigger 是如何工作的?
javascript·typescript·前端框架·vue3·vue3源码
MichaelJohn1 小时前
从零星白屏到“启发式缓存”,记录一次刚接手屎山的惊险排查
前端
程序员黑豆2 小时前
鸿蒙应用开发:6种图片加载方式详解
前端·华为·harmonyos
半个落月2 小时前
用 React 搭一个 WebGPU 模型加载页:从状态驱动到可复用进度条
前端·react.js
雪隐2 小时前
个人电脑玩AI-13让5060 Ti给你打工——我用 0.9B 小模型终结了"谁来记会议纪要"这个世纪难题
前端·人工智能·后端