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

相关推荐
念你那丝微笑20 小时前
uView Plus + Vue3 + TypeScript + UniApp 正确引入 UnoCSS(避坑版)
vue.js·typescript·uni-app
Van_captain20 小时前
React Native for OpenHarmony Toast 轻提示组件:自动消失的操作反馈
javascript·开源·harmonyos
内存不泄露20 小时前
基于Spring Boot和Vue的宠物医院管理系统设计与实现
vue.js·spring boot·信息可视化
Van_captain20 小时前
React Native for OpenHarmony Modal 模态框组件:阻断式交互的设计与实现
javascript·开源·harmonyos
xkxnq20 小时前
第一阶段:Vue 基础入门(第 14天)
前端·javascript·vue.js
前端小臻20 小时前
列举react中类组件和函数组件常用到的方法
前端·javascript·react.js
筱歌儿20 小时前
TinyMCE-----word表格本地图片转base64并上传
前端·word
研☆香20 小时前
html css js文件开发规范
javascript·css·html
0思必得020 小时前
[Web自动化] Selenium简单使用
前端·python·selenium·自动化·web自动化
2301_8187320620 小时前
下载nvm后,通过nvm无法下载node,有文件夹但是为空 全局cmd,查不到node和npm 已解决
前端·npm·node.js