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 ...
随机推荐
- 腾讯出品小程序自动化测试框架【Minium】系列(二)项目配置及测试套件使用说明
一.写在前面 真的人这一散漫惯了,收心就很难了,上午把小程序开发环境启动后,在QQ游戏里,杀了三把象棋,5把2D桌球,一上午没了,还是没法心静下来去学点东西. 那就老样子,逼着自己开始,找到 &quo ...
- 今天遇到的报错Babel noteThe code generator has deoptimised the styling of ...as it exceeds the max of 500KB.
解决办法如下: { test: /.js$/, exclude: /node_modules/, use: 'babel-loader' } 然并卵,我已经设置了这个东西了,突然发现我的文件并不在no ...
- try catch finally,try里有return,finally还执行么?
执行,并且finally的执行早于try里面的return: 结论: 1.不管有木有出现异常,finally块中代码都会执行: 2.当try和catch中有return时,finally仍然会执行: ...
- immutable.js学习笔记(八)----- immutable.js对象 和 原生对象的相互转换
一.原生对象转换为immutable.js对象 fromJS 栗子一: 栗子二: 如果数组里面有对象,对象里面有数组,怎么转换呢 复杂结构的转换 二.immutable.js对象转换为原生对象 toJ ...
- 洛谷P1365 期望dp
题目描述 一个o/x序列的得分为其中每个o的极大连续子段长度的平方和,比如ooxxxxooooxxx,分数就是 \(2 \times 2 + 4 \times 4 = 4 +16=20.\) 现给定一 ...
- [Windows] 微信超级管家,自动好友回复、计数、自动同意、群发、好友导出、消息日志、无限多开
[Windows] 微信超级管家,自动好友回复.计数.自动同意.群发.好友导出.消息日志.无限多开 微信超级管家是一款大神针对微信制作的工具,它的主要功能包括了自动回复.好友计数.自动同意.群发.好友 ...
- 基于 Hugging Face Datasets 和 Transformers 的图像相似性搜索
基于 HuggingFace Datasets 和 Transformers 的图像相似性搜索 通过本文,你将学习使用 Transformers 构建图像相似性搜索系统.找出查询图像和潜在候选图像之间 ...
- Spring Boot自动配置原理懂后轻松写一个自己的starter
目前很多Spring项目的开发都会直接用到Spring Boot.因为Spring原生开发需要加太多的配置,而使用Spring Boot开发很容易上手,只需遵循Spring Boot开发的约定就行了, ...
- JZOJ 3281. 【GDOI2013】字母连接
\(\text{Solution}\) 一眼不会,限制有点多... 那就网络流 发下确实是很简单的建图 枚举起点集合 拆点后就很好满足限制了 \(\text{Code}\) #include < ...
- JZOJ 3736. 【NOI2014模拟7.11】数学题
\(\text{Problem}\) 给出向量 \(\boldsymbol a = (x1,y1), \boldsymbol b = (x2,y2)\) 求 \(|\lambda_1\boldsymb ...