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 ...
随机推荐
- vs2019 内核驱动编译失败:网络共享盘问题
怀念2008 我以为这个年代了,中文路径问题应该解决了,记得vs 2008写c的时候曾因中文路径的问题导致编译不通过,从2015版本开始发现有时候项目名称和路径里包含中文也可以编译通过了,习惯之后后面 ...
- ionic+vue+capacitor系列笔记--常见报错以及解决
1.Require statement not part of import statement.(@typescript-eslint/no-var-requires) 解决 .eslintrc.j ...
- 在Typescript项目中,使用ESLint和Prettier,以及解决保存代码后ESLint配置冲突问题
首先,检查项目中根目录.eslintrc.js文件,该文件中定义了ESLint的基础配置,找到其中的rules 例如: const prettierConfig = require('./.prett ...
- vue element admin 关闭eslint校验
vue.config.js里面进行设置 lintOnSave: false, // lintOnSave: process.env.NODE_ENV === 'development',
- jjq(友链:https://tg.hszxoj.com/user/475)
- final关键字用于修饰局部变量-final关键字用于修饰成员变量
final关键字用于修饰局部变量 局部变量--引用类型 引用类型的局部变量,被final修饰后,只能指向一个对象,地址不能再更改.但是不影响对象内部的成员变量值的 修改,代码如下: public cl ...
- UML 图
类的表示(Class) 第一层:显示类的名称,如果是抽象类,则就用斜体显示. 第二层:是类的特性,通常就是字段和属性. 第三层:是类的操作,通常是方法或行为(前面加号(+)表示public:减号(-) ...
- C#反射运行该类下的方法
Text:反射的类名 s:方法名 data:参数 如果无参则: (string)method.Invoke(obj, null); Type type = typeof(Text); MethodIn ...
- 真正“搞”懂HTTPS协议15之安全的定义
前面我们花了很大的篇幅来讲HTTP在性能上的改进,从1.0到1.1,再到2.0.3.0,HTTP通过替换底层协议,解决了一直阻塞性能提升的队头阻塞问题,在性能上达到了极致. 那么,接下来,我们来聊一聊 ...
- Portainer功能使用之开启远程访问
配置远程连接Docker服务 1.配置 说明:docker默认没有打开"2375"端口,需要先进行配置开启端口 命令 修改配置:vim /usr/lib/systemd/syste ...