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 ...
随机推荐
- Asp-Net-Core-搭建ELK日志平台-Docker-Compose版本
title: Asp.Net Core 搭建ELK日志平台(Docker-Compose版本) date: 2022-09-27 15:16:59 tags: - .NET 由于暂时用不上Logsta ...
- [cocos2d-x]关于3.x的触摸机制
触摸机制的概念 通过对要监听触摸的节点进行注册,然后自定义相应的触摸函数,由事件监听器实现对触摸的监听并且实现相应的响应动作. 触摸的分类 单点触摸 下面是实现单点触摸监听的步骤: //第一步:先创建 ...
- 【架构设计】你真的理解软件设计中的SOLID原则吗?
前言 在软件架构设计领域,有一个大名鼎鼎的设计原则--SOLID原则,它是由由Robert C. Martin(也称为 Uncle Bob)提出的,指导我们写出可维护.可以测试.高扩展.高内聚.低耦合 ...
- 深入理解 OpenMP 线程同步机制
深入理解 OpenMP 线程同步机制 前言 在本篇文章当中主要给大家介绍 OpenMP 当中线程的同步和互斥机制,在 OpenMP 当中主要有三种不同的线程之间的互斥方式: 使用 critical 子 ...
- C 语言输出100至200之间的质数(素数)
题目描述 运行 C 程序,输出 100 至 200 之间的质数. 输入描述 无 输出描述 输出 100 至 200 之间的质数,每行输出一个质数,每个质数前面需要带有序号. 输出样例 解题思路 在&l ...
- HashSet集合介绍-哈希值
HashSet集合介绍 java.util.HashSet是set 接口的一个实现类,它所存储的元素是不可重复的,并且元素都是无序的(即存取顺序不一致).java.util.HashSet底层的实现其 ...
- 财务精度:BigInteger 与 BigDecimal
财务精度:BigInteger 与 BigDecimal 每博一文案 师父说: 人这一辈子,真地好难. 有些人,好着好着,忽然就变陌生了,有些手,牵着牵着,瞬间就放开了,有些路,走着走着,就失去了方向 ...
- 【分析笔记】展讯 RDA8810PL 平台 Camera 驱动分析和移植(Android 4.4 )
前言概述 因以下原因,导致不得不通过代码分析来学习如何在该平台下进行摄像头驱动移植 香橙派开发商(迅龙软件)仅提供能跑起来的源代码.固件,以及简单的编译文档,不提供其它技术支持 baidu.googl ...
- 【Redis场景拓展】秒杀问题-全局唯一ID生成策略
全局唯一ID 为什么要使用全局唯一ID: 当用户抢购时,就会生成订单并保存到订单表中,而订单表如果使用数据库自增ID就存在一些问题: 受单表数据量的限制 id的规律性太明显 场景分析一:如果我们的id ...
- 浅谈Python中的with,可能有你不知道的
Python中的with,没那么简单,虽然也不难 https://docs.python.org/zh-cn/3.9/reference/compound_stmts.html#the-with-st ...