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 ...
随机推荐
- 我们来汉化IntelliJ IDEA
(原发于 GitHub Pages,2018-10-13 13:51:09) 两年前我从一名光荣的C++程序员专业为PHP程序员以后,告别了世界第一IDE Visual Studio,改用当时觉得特别 ...
- 02-Tcl输出、赋值与替换
2 Tcl输出.赋值与替换 2.1 puts Tcl的输出命令是puts,将字符串标准输出channelled.语法中两个问号之间的参数为可选参数. # 例1 puts hello # 输出 hell ...
- 前端必备基础知识之--------原生JS发送Ajax请求
原生JS发送Ajax请求 ajax({ type: 'POST', url: 'http://10.110.120.123:2222', // data: param, contentType: 'a ...
- 前端向后端发送请求(FormData),你们不要吐槽我,有的时候我也不想写注释
JSON对象转成formData对象,formData对象转成JSON 在向后端请求时,如果上传的数据里存在file文件对象,需要用到表单提交,这时候我们需要将JSON对象,转成formData对象, ...
- 前后端分离——使用OSS
1. 第一步:编写OSS的工具类 点击查看代码 aliyun: oss: keyid: 填写自己的 keysecret: 填写自己的 endpoint: 填写自己的 bucketname: 填写自己的 ...
- allure环境搭建
allure环境搭建 在搭建之前你应该有python.pycharm jdk也需要(文中忽略,可以参考网上文档安装,可以用jdk1.8) 以windows为例,mac.linux你用到这些操作系统,这 ...
- 淘宝首页数据采集之js采集
搜索页面采集,数据在控制台哦!!! 搜索页面采集,数据在控制台哦!!! 搜索页面采集,数据在控制台哦!!! 既然能打到控制台,当然也能传到系统!!! 既然能打到控制台,当然也能传到系统!!! 既然能打 ...
- 原生微信小程序封装request
request文件 // 封装请求 const baseURL = 'https://api-hmugo-web.itheima.net/api/public/v1' const request = ...
- ArcGIS Pro SDK 002 对数据文件的读取和操作
做系统开发或者数据处理的时候,我一般还是喜欢使用文件数据源,例如矢量用.shp文件存储,栅格数据用.tif或者.img文件存储.ArcGIS Pro SDK中对数据源操作的API和ArcObjects ...
- C端自动化实现:appium+winappdriver+python
一. 前言 有小伙伴有办公自动化的需求,特此出一篇C端自动化教程,并附带demo案例.C端的自动化比B端多一个appium,其他的操作大同小异. 二. 环境 appium:exe工具,用于启动服务,官 ...