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 ...
随机推荐
- 为什么网络I/O会被阻塞?
摘要:I/O 其实就是 input 和 output 的缩写,即输入/输出. 本文分享自华为云社区<为啥网络IO会被阻塞呢>,作者: 龙哥手记. 我们应该都知道 socket(套接字),你 ...
- salesforce零基础学习(一百二十四)Postman 使用
本篇参考: Salesforce 集成篇零基础学习(一)Connected App salesforce 零基础学习(三十三)通过REST方式访问外部数据以及JAVA通过rest方式访问salesfo ...
- [C#]关于override和new在重写方法时的区别
规则: 在"运行时"遇到虚方法时,对象会调用虚成员派生得最远的.重写的实现. 如果是用new修饰符实现的方法,它会在基类面前隐藏派生类重新声明的成员,这时候会找到使用new修饰符的 ...
- Linux C 打印变量数组内容到一个文件中的方法。
思路: 1.以追加的方式新建打开一个文件 2.将buf 按字节,先将整型转换为字符串,之后写入到文件中. memset(tmp_buf, 0, sizeof(tmp_buf)); sprintf(tm ...
- github下载后的文件,winrar打开中文是乱码
是因为编码问题,通过7Z解压后正常
- vue3+quasar+capacitor开发多平台项目,使用quasar改变主题背景
quasar的样式和其他的框架修改不太一样,需要我们使用动态的方式来进行变更,一般来说有两种方案进行主题修改 方案一: 修改样式所需文档: 这里是样式修改的说明:https://quasar.dev/ ...
- flutter_swiper:Another exception was thrown: ScrollController attached to multiple scroll views.
Another exception was thrown: ScrollController attached to multiple scroll views. 翻译一下:引发了另一个异常:Scro ...
- Google Cloud Spanner 究竟是什么?
谷歌于2017年推出的Google Cloud Spanner,原是谷歌内部使用的一个数据服务,后来又成为了谷歌云平台上搭建的数据库服务. Google Cloud Spanner 是一种数据库,它结 ...
- Scanner概述-Scanner使用步骤
Scanner概述 了解了API的使用方式,我们通过Scanner类,熟悉一下查询API,并使用类的步骤. 什么是Scanner类 一个可以解析基本类型和字符串的简单文本扫描器. 例如,以下代码使用户 ...
- Unity3D——鼠标双击
Unity之鼠标双击 小黑终于又回到公司了! 能在公司安生的待段时间了,今天更新一篇吧! 懒惰的小黑给大家分享个好东西吧,解决双击之痛! 前言 小黑相信有许多人和我一样.万年不会碰到一个需求:双击!可 ...