Vue项目中怎样把参数(对象)转成formdata传给后端? 封装函数 亲测有效
普通传参格式如下:

想要的formData参数格式如下:

首先封装参数(对象)转换为formData格式
getFormData(object) {
const formData = new FormData();
Object.keys(object).forEach(key => {
const value = object[key];
if(Array.isArray(value)) {
value.forEach((subValue, i) => {
formData.append(key + `[${i}]`, subValue)
})
} else {
formData.append(key, object[key])
}
})
return formData;
},
调用示例:注意看画红线位置

就这么简单 完结!撒花✿✿ヽ(°▽°)ノ✿
作者:微微一笑绝绝子
出处:https://www.cnblogs.com/wwyxjjz/p/17032298.html
本博客文章均为作者原创,转载请注明作者和原文链接。
Vue项目中怎样把参数(对象)转成formdata传给后端? 封装函数 亲测有效的更多相关文章
- 在Vue项目中使用html2canvas生成页面截图并上传
使用方法 项目中引入 npm install html2canvas html代码 //html代码 <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref --> <di ...
- vue项目在IE浏览器和360兼容模式下页面不显示问题,亲测有效
解决方法:安装 "babel-polyfill" 1.命令:cnpm install --save-dev babel-polyfill 2.在入口main.js文件引入:impo ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...
- 在vue项目中使用axios发送FormData
这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的 使用 application/x-www-form-ur ...
- vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
- 在vue项目中如何添加eslint
随着vue的越做越好,更多的开发者选择使用vue,本篇记录如何在vue项目中添加eslint. 首先第一种就是在vue项目创建初始时就选择了创建,随着初始化一起代入到了项目当中,那么要是一开始觉得es ...
- vue项目中使用Lodop实现批量打印html页面和pdf文件
1.Lodop是什么? Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印.控件功能强大,却简单易用,所有调用如同JavaScript扩 ...
- vue项目中使用bpmn-流程图json属性转xml(七篇更新完成)
内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具 ...
- vue项目中使用ts(typescript)入门教程
最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...
随机推荐
- 数据结构——八大排序算法(java部分实现)
java基本排序算法 1.冒泡排序 顶顶基础的排序算法之一,每次排序通过两两比较选出最小值(之后每个算法都以从小到大排序举例)图片取自:[小不点的博客](Java的几种常见排序算法 - 小不点丶 - ...
- ionic+vue+capacitor系列笔记--手机从安卓10升级到安卓11以后,之前的代码不管用了,无法跳转其他应用
之前手机是安卓10版本,没什么问题,升级以后,手机出现了一些异常,发现原来代码里写的跳转功能,无法使用了哦~~脑壳痛 解决方案 本项目:build.gradle targetSdkVersion 30 ...
- 解析url地址hashhref
- windows11预览版装WSA心得
这两天心血来潮想要装个WSA(安卓windows子系统),原来一直用的安卓模拟器(mumu啊蓝叠啊逍遥啊),但感觉像wsa这种安卓系统与主系统融合的模式更带感,于是开始了我艰苦的安装(瞎捯饬)之路 我 ...
- Swagger的基本使用
Swagger简介和使用 使用Swagger你只需要按照它的规范去定义接口及接口相关的信息,再通过Swagger衍生出来的一系列项目和工具,就可以做到生成各种格式的接口文档,以及在线接口调试页面等等. ...
- DML_添加数据-DML_删除数据
DML_添加数据 添加数据 语法 : insert into 表名(列名1,列名2,...列名n) values (值1,值2,... 值n); 注意: 1.列名和值要一一对应. 2.如果表名后,不定 ...
- 字符串拼接输出-Predicate接口
字符串拼接输出 下面的字符串数组当中存有多条信息,请按照格式""\姓名∶XX.性别:xx."的格式将信息打印出来.要求将打印姓名的动作作为第一个Consumer 接口的L ...
- 生成1-n之间的随机数-猜数字小游戏
生成1-n之间的随机数 获取随机数 获取1-n之间的随机数,包含n,代码如下: // 导包 import java.util.Random; public class Test01Random { p ...
- 【随笔记】全志平台 gpio-leds 驱动应用
硬件信息 内核版本:Linux 4.9 硬件原理: GPIO 通过一颗 MOS 管(2N7002ET1G),接到 LED 负极,LED 正极接电源. GPIO 通过拉高导通 MOS ,将 LED 接地 ...
- 【分析笔记】LVGL v8.2.0 使用 freetype 概率性无显示的问题
使用目前最新的 Releases 版本 LVGL v8.2.0 ,移植好 freetype2 后测试,发现每次启动程序时会高概率出现屏幕显示全白色背景,无任何内容的问题. 打开日志开关,出现问题时会有 ...