普通传参格式如下:

想要的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. MySQL 更新数据 不同条件(批量)更新不同值

    一般在更新时会遇到以下场景:1.全部更新:2.根据条件更新字段中的某部分内容:3.根据不同的条件更新不同的值,以下是几种场景中常用的update方法. 一.方法分类 二.具体用法 (1)根据条件更新值 ...

  2. VBA中的(升降序)排名问题

    1 Sub 升序() 2 3 all_rows = Sheets(1).Range("a65536").End(xlUp).Row 4 5 With ActiveWorkbook. ...

  3. BUG日记---SSM进行多表查询错误-----页面使用<c:foreach>错误

    javax.servlet.ServletException: javax.servlet.jsp.JspTagException: Don't know how to iterate over su ...

  4. Java基础1-1-2—java基础语法(运算符)

    2. 运算符 2.1 算术运算符 运算符和表达式 运算符:对常量或者变量进行操作的符号 表达式:用运算符把常量或者变量连接起来符合java语法的式子就可以称为表达式. 不同运算符连接的表达式体现的是不 ...

  5. 让 MSYS2 Bash 像 Git Bash 一样显示 Git 分支名称

    Git for Windows 的 Bash 有一个很实用的功能,如果当前目录处于 Git 仓库中,那么命令行中会显示当前 Git 分支的名称(见下图). 然而原版的 MSYS2 Bash 没有这个功 ...

  6. 移动 WEB 开发之 阿里百秀移动端页面制作

    一.技术选型 二.需求分析 1.页面布局分析 2. 屏幕划分 三.页面制作 1. 项目前期准备 搭建项目结构 创建 html 骨架结构以及引入相关样式 <head> <meta ch ...

  7. 编程哲学之 C# 篇:006——什么是 .NET

    本章将用本系列第二章中提到的 类比 思维来让读者快速了解什么是.NET. 当年在网上看到一个初学者问<Java编程思想>第一章看不懂怎么办.然后我发现在很多经典的技术书中,如<C#入 ...

  8. Android IO 框架 Okio 的实现原理,到底哪里 OK?

    本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 前言 大家好,我是小彭. 今天,我们来讨论一个 Square 开源的 I/O 框架 Okio,我们最开始接触 ...

  9. wsl ubuntu vscode 安装 Fira Code

    如果使用windows terminal(其实就是powershell)那么只需要在windows 中安装 Fira Code 即可,但是如果需要让wsl 中的vscode 也用Fira Code 就 ...

  10. 力扣---1148. 文章浏览 I

    Views 表:+---------------+---------+| Column Name   | Type    |+---------------+---------+| article_i ...