普通传参格式如下:

想要的formData参数格式如下:

首先封装参数(对象)转换为formData格式

  1. getFormData(object) {
  2. const formData = new FormData();
  3. Object.keys(object).forEach(key => {
  4. const value = object[key];
  5. if(Array.isArray(value)) {
  6. value.forEach((subValue, i) => {
  7. formData.append(key + `[${i}]`, subValue)
  8. })
  9. } else {
  10. formData.append(key, object[key])
  11. }
  12. })
  13. return formData;
  14. },

调用示例:注意看画红线位置

就这么简单 完结!撒花✿✿ヽ(°▽°)ノ✿

作者:微微一笑绝绝子
出处: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. 加速 Document AI (文档智能) 发展

    在企业的数字工作流中充满了各种文档,包括信件.发票.表格.报告.收据等,我们无法自动提取它们的知识.如今随着文本.视觉和多模态人工智能的进步,我们有可能解锁这些知识,这篇文章向你展示了你的团队该如何使 ...

  2. 图文并茂解决Client does not support authentication protocol requested by server; consider upgrading MySQL

    今天服务器部署node.js+mysql,调用接口报错ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protoc ...

  3. final关键字用于修饰成员方法-final关键字用于修饰局部变量

    final关键字用于修饰成员方法 修饰方法 格式如下: 修饰符 final 返回值类型 方法名(参数列表){ //方法体 } 重写被 final 修饰的方法,编译时就会报错. final关键字用于修饰 ...

  4. 报错One record is expected, but the query result is multiple records

    总结:出现这种情况,显而易见,就是查询的数据在数据库中不止一条,而我调用的selectOne方法,返回值是一个User对象,导致报错 点击查看错误代码 LambdaQueryWrapper<Us ...

  5. FAQ 关于pip你应该知道的一些技巧

    pip简介 pip是安装了python之后的一个应用程序,包管理程序,有点类似于yum.npm.apt等工具 物理位置一般是python.exe所在目录下的scripts下 以我为例,我Python安 ...

  6. 普冉PY32系列(四) PY32F002/003/030的时钟设置

    目录 普冉PY32系列(一) PY32F0系列32位Cortex M0+ MCU简介 普冉PY32系列(二) Ubuntu GCC Toolchain和VSCode开发环境 普冉PY32系列(三) P ...

  7. python 取整方法

    1.向下取整: int() 2.向上取整:ceil() 使用ceil()方法时需要导入math模块,例如 3.四舍五入:round() 4.分别取 将整数部分和小数部分分别取出,可以使用math模块中 ...

  8. ROS入门:小海龟实验

    1.初试小海龟 1.roscore 2.rosrun turtlesim turtlesim_node 3.rosrun turtlesim turtle_teleop_key 2.发布话题控制小海龟 ...

  9. Spring(AOP的认识、实现)

    2:Spring AOP AOP (Aspect Oriented Programming) 面向切面编程 OOP(Object Oriented Programming)面向对象编程,用对象的思想来 ...

  10. C语言-补漏 -内存管理

    8. 全局就是简简单单编写的 静态函数--只能在当前文件内使用的函数