普通传参格式如下:

想要的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传给后端? 封装函数 亲测有效的更多相关文章

  1. 在Vue项目中使用html2canvas生成页面截图并上传

    使用方法 项目中引入 npm install html2canvas html代码 //html代码 <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref --> <di ...

  2. vue项目在IE浏览器和360兼容模式下页面不显示问题,亲测有效

    解决方法:安装 "babel-polyfill" 1.命令:cnpm install --save-dev babel-polyfill 2.在入口main.js文件引入:impo ...

  3. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  4. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  5. 在vue项目中使用axios发送FormData

    这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的    使用 application/x-www-form-ur ...

  6. vue项目中遇到的一些问题

    或访问:https://github.com/littleHiuman/experiences-about-vue  欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...

  7. 在vue项目中如何添加eslint

    随着vue的越做越好,更多的开发者选择使用vue,本篇记录如何在vue项目中添加eslint. 首先第一种就是在vue项目创建初始时就选择了创建,随着初始化一起代入到了项目当中,那么要是一开始觉得es ...

  8. vue项目中使用Lodop实现批量打印html页面和pdf文件

    1.Lodop是什么? Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印.控件功能强大,却简单易用,所有调用如同JavaScript扩 ...

  9. vue项目中使用bpmn-流程图json属性转xml(七篇更新完成)

    内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具 ...

  10. vue项目中使用ts(typescript)入门教程

    最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...

随机推荐

  1. 让 Win8.1 微软拼音新体验模式支持 Metro 应用

    内容回顾: [1]十个步骤找回 Win8 中的微软拼音新体验模式 [2]发布个工具,一键恢复Win8/8.1中的微软拼音长句模式(新体验模式) 在 [1] 中,我们找回了 Win8 里的微软拼音新体验 ...

  2. 深入探究Java中的对象类型变量声明操作——在声明对象时,系统究竟做了什么?

    深入探究Java中的对象类型变量声明操作--在声明对象时,系统究竟做了什么? 摘要:本文主要对Java中的对象类型变量的声明的底层原理做了探究. 目录 深入探究Java中的对象类型变量声明操作--在声 ...

  3. P5687 [CSP-S2019 江西] 网格图

    题面 给定一个 \(n\times m\) 的网格图,行从 \(1\sim n\) 编号,列从 \(1\sim m\) 编号,每个点可用它所在的行编号 \(r\) 与所在的列编号 \(c\) 表示为 ...

  4. VUEX 使用学习三 : mutations

    转载请注明出处: 在 Vuex 中 store 数据改变的唯一方法就是提交 mutations.mutations里面装着一些改变数据方法的集合,这是Vuex 设计很重要的一点,就是把处理数据逻辑方法 ...

  5. API 网关的功能用途及实现方式

    1. API 网关诞生背景 前言 API 经济生态链已经在全球范围覆盖, 绝大多数企业都已经走在数字化转型的道路上,API 成为企业连接业务的核心载体, 并产生巨大的盈利空间.快速增长的 API 规模 ...

  6. Linux音频采集和在国产化平台中遇到的坑(一)

    Linux音频采集和在国产化平台中遇到的坑(一) 最近在做一个国产化平台的软件项目的开发,是基于国产芯片的银河麒麟系统.其中有一个重要模块,是采集和播放音频数据,播放不用多说了,采集的话,包括采集麦克 ...

  7. 增加for循环-泛型的概念

    增加for循环 增强for循环(也称for each循环)是JDK1.5以后出来的一个高级for循环,专门用来遍历数组和集合的.它的内部原理其实是个lterator迭代器,所以在遍历的过程中,不能对集 ...

  8. JDK的下载与安装-环境变量的配置

    JDK的下载与安装 环境变量的配置 配置环境变量作用 开发Java程序,需要使用JDK中提供的工具,工具在JDK9安装目录的 bin 目录下. 在DOS命令行下使用这些工具,就要先进入到JDK的bin ...

  9. MyBatis的使用三(在sql语句中传值)

    本文主要介绍在mybatis中如何在sql语句中传递参数 一. #{ } 和 ${ } 1. #{ } 和 ${ }的区别 #{ }是预编译处理 ==> PreparedStatement ${ ...

  10. 【SW】利用3D打印机打印 PCB 钢网的方法

    每完成一个小作品以后,PCB打样回来,手工焊接着费时费力,定制钢网又未免太过浪费,想到自己有一台 FDM 3D 打印机,是不是可以通过 3D 打印机打印 "钢网" 呢? 在网上也翻 ...