首页 > 其他分享 >Vue项目中怎样把参数(对象)转成formdata传给后端? 封装函数 亲测有效

Vue项目中怎样把参数(对象)转成formdata传给后端? 封装函数 亲测有效

时间:2023-01-07 11:36:01浏览次数:45  
标签:Vue 封装 formdata object value 参数 key formData 亲测

普通传参格式如下:

 

 

想要的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,object,value,参数,key,formData,亲测
From: https://www.cnblogs.com/wwyxjjz/p/17032298.html

相关文章

  • vue-router
    vue-router实现页面的跳转在cmd中输入:npminstallvue-router--save-dev如果报错则使用:cnpminstallvue-router--save-dev运行程序(如果报错则降低vue-route......
  • Vue3单击新增添加新的input
     效果图: 代码:<template><div><inputtype="text"v-for="(item,i)ofitems"v-model="items[i]":key="i"@input="inp"><button@click="onAdd">......
  • Vue3 中的响应式api
    一、setup文件的认识 特点1:script中间的内容就是一个对象特点2:script在第一层定义的方法或者变量=>就是这个对象属性 =>顶层的绑定回被暴露给模板(模......
  • vue修改浏览器标题栏标题及图标
    一、生成ico图标文件并更名为facicon.ico二、分别修改build文件夹下的webpack.dev.conf.js和webpack.prod.conf.js文件的HtmlWebpackPlugin项、添加图标配置项 三、修......
  • Vue2和Vue3实现响应式原理
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>Document</title> </head> <body> <scripttype="text/javascript"> //源数据 letpers......
  • vue-webpack
    vue-webpack一、相关概念webpack是一个js应用程序的静态模块打包器(modulebundler),能把各种资源都作为模块来处理和使用。当webpack处理应用程序时,它会递归构建一个依赖......
  • vue中$children的理解
    官网介绍$children$children获取当前实例的直接子组件。需要注意$children并不保证顺序,也不是响应式的。[特别重要]如果你发现自己正在尝试使用$children来进行数......
  • Vue:TDesign Starter 自定义指令控制权限
    Vue支持自定义指令,具体API说明可以参考下面两个文档:Vue.directive(id,[definition])Vue自定义指令1.钩子函数Vue.directive提供了几个钩子函数,分别是:bindi......
  • vue的组件封装
    一、为什么要封装组件(组件化开发) 组件化开发(封装组件)的好处好处显而易见,可以增加代码的复用性、灵活性,从而提高开发效率。试想如果一个项目中在很多页面都能用到一个......
  • 亲测有效! Bypass V1.15.5 12306分流抢票助手 for Windows
    亲测有效!BypassV1.15.512306分流抢票助手forWindows12306Bypass也就是12306分流抢票软件,是一款全程自动抢票,自动识别验证码,多线程秒单、稳定捡漏,支持多天、多车次......