普通传参格式如下:

想要的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. 【Java应用服务体系】「序章入门」全方位盘点和总结调优技术专题指南

    专题⽬标 本系列专题的目标是希望可以帮助读者们系统和全访问掌握应⽤系统调优的思路与方案以及相关的调优工具的使用,虽然未必会覆盖目前的所有的问题场景,但是还是提供了较为丰富的案例和调优理论,会帮助大家打 ...

  2. 腾讯出品小程序自动化测试框架【Minium】系列(二)项目配置及测试套件使用说明

    一.写在前面 真的人这一散漫惯了,收心就很难了,上午把小程序开发环境启动后,在QQ游戏里,杀了三把象棋,5把2D桌球,一上午没了,还是没法心静下来去学点东西. 那就老样子,逼着自己开始,找到 &quo ...

  3. py教学之集合

    集合的概念 集合(set)是一个无序的不重复元素序列. 可以使用大括号 { } 或者 set() 函数创建集合,注意:创建一个空集合必须用 set() 而不是 { },因为 { } 是用来创建一个空字 ...

  4. DML_修改数据

    DML_修改数据 修改数据: 语法: update 表名 set 列名1 = 值1,列名2 = 值2, ... [ where 条件 ] ; 注意: 1. 如果不加任何条件,则会将表中所有记录全部修改 ...

  5. java 入门与进阶P-6.3+P-6.4

    包裹类型 对于基本数据类型,Java提供了对应的包裹(wrap)类型.这些包裹类型将一个基本数据类型的数据转换成对象的形式,从而使得它们可以像对象一样参与运算和传递.下表列出了基本数据类型所对应的包裹 ...

  6. 时间轮TimeWheel工作原理解析

    时间轮工作原理解析 一.时间轮介绍 1.时间轮的简单介绍 时间轮(TimeWheel)作为一种高效率的计时器实现方案,在1987年发表的论文Hashed and Hierarchical Timing ...

  7. 发布在IIS的apk或者ipa文件无法访问

    1.在Startup.cs的Configure方法中添加如下代码 var provider = new FileExtensionContentTypeProvider();       provid ...

  8. Sentinel熔断与限流

    1.简介 在线文档: https://sentinelguard.io/zh-cn/docs/system-adaptive-protection.html 功能: 流量控制 速率控制 熔断和限流 和 ...

  9. 使用java.util.Timer实现定时任务,详解Thread.sleep() in a loop, probably busy-waiting问题

    很多时候,我们需要定时任务实现一些诸如刷新,心跳,保活等功能.这些定时任务往往逻辑很简单,使用定时任务的框架(例如springboot @Scheduled)往往大材小用. 下面是一个定时任务的典型写 ...

  10. 使用一个文件集中管理你的 Nuget 依赖版本号

    在 .net 7 以前,项目对于 nuget 依赖项的版本依赖散落与解决方案的各个角落.这导致升级维护和查看的时候都比较麻烦.在 .net 7 中,你可以使用一个文件来集中管理你的 Nuget 依赖版 ...