普通传参格式如下:

想要的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. [LeetCode]对角线遍历

    题目 代码 class Solution { public: vector<int> findDiagonalOrder(vector<vector<int>>&a ...

  2. 《Effective C++》关于const,define等总结

    (将每一条item的总结和自己的理解给记录下来,以后有需要的话可以再回头参阅这些资料,不懂的再翻书温故.) Item 02:尽量以const ,enum,inline替换#define #define ...

  3. ASP.NET 6.0 Core 迁移 ASP.NET Core 7.0

    2022年微软发布了.NET 7, 同时提供了详细的升级迁移方案. Migrate from ASP.NET Core 6.0 to 7.0 今天给大家简单整理.分享一篇文章. 一.首先需要升级Vis ...

  4. jjq(友链:https://tg.hszxoj.com/user/475)

         

  5. 最新编程语言排名Python、C、Java 和 C++ 已形成四足鼎立之势

    引言 技术的千变万化,都是有迹可循的,随着最新的 TIOBE 十月编程语言榜单重磅发布,不同开发语言的排名和发展趋势也随之揭晓! 四大编程语言不断增强其主导地位 曾几何时,编程语言界中 Java.C. ...

  6. MRS_Debug仿真相关问题汇总

    解决问题如下: Debug时,看不到外设寄存器选项 Debug时,更改变量显示类型 Debug时,断点异常 跳过所有断点 取消仿真前自动下载程序 Debug时仅擦除程序代码部分flash空间 保存De ...

  7. spring中Utils工具类注入问题

    使用工具类的时候,我们想在static修饰的方法中,通过注入来调用其他方法,这里就存在问题. 第一:普通工具类是不在spring的管理下,spring不会依赖注入 第二:即便使用@Autowired完 ...

  8. Solon2 开发之插件,二、插件扩展机制(Spi)

    插件扩展机制,是基于 "插件" + "配置申明" 实现的解耦的扩展机制(类似 Spring Factories.Java Spi):简单.弹性.自由.它的核心作 ...

  9. 【DS】1.1

    1.概念: 数据项:最小单位 数据对象:相同性质的数据元素集合 数据结构:关系 集合 同样的数据元素可组成不同的数据结构不同数据元素也可以组成相同的数据结构 2.三要素: 逻辑结构:集合(不考)线性结 ...

  10. Error: EPERM: operation not permitted, mkdir ‘C:\Program Files\nodejs‘TypeError: Cannot read proper

    出现问题: 问题如题,出现场景:vscode运行npm命令 解决办法: 有的友友说安装nodejs时用管理员身份安装,右键没找到最后删掉了此文件即可. 这个文件缓存了之前的配置与现在安装的nodejs ...