Vue项目里实现json对象转formData数据

平常调用后端接口传参都是json对象,当提交表单遇到有附件需要传递时,通常是把附件上传单独做个接口,也有遇到后端让提交接口一并把附件传递到后端,这种情况需要把参数转成formData的数据,需要用到new FormData()。json对象转formData,一个一个的赋值代码会非常冗余,并且遇到复杂的数据结构,还需要一层一层的往下循环赋值。因此写了一个demo解决当前问题以供参考,写的不好的地方欢迎指正。

<template><div>测试页面<el-button type="primary" size="small" @click="changeHandle">json对象转formData</el-button></div>
</template><script>
export default {name: "test",data() {return {};},methods: {changeHandle() {let obj = {name: "yongqiang.chen",age: 30,likes: ["足球", "篮球", "乒乓球"],work: {address: "软件园C5",floor: 7,isWork: true,computer: {color: "black",num: 8,size: 1024,},},deepArray: [[{ name: "张三", age: 25, likes: ["七星彩", "大乐透", "双色球"] },{ name: "李四", age: 26, likes: ["轿车", "摩托车", "自行车"] },],[{ title: "隐形的翅膀", singer: "张韶涵" },{ title: "2002年的第一场雪", singer: "刀郎" },],],};let formDatas = new FormData();this.makeFormData(obj, formDatas);for (let [name, value] of formDatas) {console.log(`${name} = ${value}`);}},makeFormData(obj, form_data) {var data = [];if (obj instanceof File) {data.push({ key: "", value: obj });} else if (obj instanceof Array) {for (var j = 0, len = obj.length; j < len; j++) {var arr = this.makeFormData(obj[j]);for (var k = 0, l = arr.length; k < l; k++) {var key = !!form_data ? j + arr[k].key : "[" + j + "]" + arr[k].key;data.push({ key: key, value: arr[k].value });}}} else if (typeof obj == "object") {for (var j in obj) {var arr = this.makeFormData(obj[j]);for (var k = 0, l = arr.length; k < l; k++) {var key = !!form_data ? j + arr[k].key : "." + j + "" + arr[k].key;data.push({ key: key, value: arr[k].value });}}} else {data.push({ key: "", value: obj });}if (!!form_data) {// 封装for (var i = 0, len = data.length; i < len; i++) {form_data.append(data[i].key, data[i].value);}return form_data;} else {return data;}},},
};
</script><style>
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/613522.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python】科研代码学习:一

【Python】科研代码学习&#xff1a;一 前言魔方方法 __dict__, __setattr__ , __getattr__ , __getattribute__hasattr(obj, name)super()类型注解解包 unpackingzip() 函数 前言 搞科研&#xff0c;最重要的还是得看懂别人的源代码。 这就意味着python不能太差 看到比较有用…

基于SpringBoot的教学管理系统

文章目录 项目介绍主要功能截图&#xff1a;部分代码展示设计总结项目获取方式 &#x1f345; 作者主页&#xff1a;超级无敌暴龙战士塔塔开 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &…

Go语言-无限可能的管道协程:解锁并发编程的新境界

Go语言-无限可能的管道协程&#xff1a;解锁并发编程的新境界 在Go语言中&#xff0c;协程&#xff08;Goroutine&#xff09;是一种轻量级的并发执行单位&#xff0c;它可以与其他协程并发执行&#xff0c;但不同于操作系统级别的线程。Go语言的协程由Go运行时&#xff08;Go…

​软件测试面试:关键问题解析

在软件开发领域&#xff0c;测试是确保软件质量的重要环节。面试是评估软件测试人员技能和经验的关键时刻。在一个软件测试面试中&#xff0c;面试官通常会问一系列问题来评估面试者的知识、技能和解决问题的能力。本文将介绍一些常见的软件测试面试问题&#xff0c;并给出一些…

【2024最新版】接口自动化测试基础(基础篇)

接口自动化测试基础 目录 1、什么是接口自动化测试 2、接口自动化测试要素 3、常用的落地方案 什么是接口自动化测试 PART 01 1.1什么是接口自动化测试 接口自动化测试是一种通过编写脚本或使用工具来自动化执行应用程序接口来验证接口正确性的测试方法。接口自动化测试的…

在drawio中使用BPMN2.0绘制详细的业务流程图和编排模型

在drawio中使用BPMN2.0绘制详细的业务流程图和编排模型 drawio是一款强大的图表绘制软件&#xff0c;支持在线云端版本以及windows, macOS, linux安装版。 如果想在线直接使用&#xff0c;则直接输入网址draw.io或者使用drawon(桌案), drawon.cn内部完整的集成了drawio的所有功…

APP开发——目前APP开发的几种形式

关于APP开发目前已经过了火热的阶段&#xff0c;现在学习APP开发的人越来越多&#xff0c;但在实际的业务场景中&#xff0c;APP开发还是有一部分的市场需求。 所以&#xff0c;这里简单记录一下APP开发的几种思路和方案。 APP平台 首先&#xff0c;目前APP开发主要有两大平…

【Python】使用tkinter设计开发Windows桌面程序记事本(3)

上一篇&#xff1a;【Python】使用tkinter设计开发Windows桌面程序记事本&#xff08;2&#xff09;-CSDN博客 下一篇&#xff1a; 作者发炎 本文章与"记事本项目"的第一篇文章类似。这里是重新创建新的"页面设置"子窗口&#xff0c;进行开发设计。 那为…

自动化测试的三种等待方式

自动化测试的等待方式主要有三种&#xff1a;强制等待、隐式等待和显式等待。 1. 强制等待&#xff08;Sleep&#xff09; 通过在代码中使用Thread.sleep()方法来实现的&#xff0c;该方法会阻塞当前线程的执行&#xff0c;程序会暂停指定的时间。 这种方式没有条件判断&…

SpringMVC 域对象共享数据

文章目录 2、使用ModelAndView向request域对象共享数据3、使用Model向request域对象共享数据4、使用map向request域对象共享数据5、使用ModelMap向request域对象共享数据6、Model、ModelMap、Map的关系7、向session域共享数据8、向application域共享数据 1、使用ServletAPI向re…

钉钉java登录

获取token &#xff1a;API Explorer 获取部门列表&#xff1a;获取部门列表 - 钉钉开放平台

通过wireshark抓取的流量还原文件(以zip为例)

wireshark打开流量包&#xff0c;通过zip关键字查找 追踪流可查看详细信息 选中media Type右键&#xff0c; 点击导出分组字节流选项 将生成的文件进行命名&#xff0c;需要时什么格式就以什么格式后缀

ffmpeg api-alac-text.c

generate_raw_frame 这个函数接受一个 frame_data 数组作为参数&#xff0c;用于存储音频数据。i 参数表示当前帧的索引&#xff0c;sample_rate 是采样率&#xff0c;channels 是声道数&#xff0c;frame_size 是帧大小。函数使用一个简单的算法生成音频数据&#xff0c;然后…

leetcode:LCR 159. 库存管理 III(python3解法)

难度&#xff1a;简单 仓库管理员以数组 stock 形式记录商品库存表&#xff0c;其中 stock[i] 表示对应商品库存余量。请返回库存余量最少的 cnt 个商品余量&#xff0c;返回 顺序不限。 示例 1&#xff1a; 输入&#xff1a;stock [2,5,7,4], cnt 1 输出&#xff1a;[2]示例…

探秘人工智能大会:揭示未来技术发展趋势与学习之道

随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;已经逐渐渗透到我们生活的方方面面。 参加人工智能大会&#xff0c;不仅能够洞察到最前沿的技术动态&#xff0c;还能与业界专家、学者交流思想&#xff0c;共同探讨AI的未来发展。本文将带您探秘人工智能大…

nuxt pm2使用、启动、问题解决方案

pm2简介 pm2是一个进程管理工具,可以用它来管理node进程&#xff0c;并查看node进程的状态&#xff0c;当然也支持性能监控&#xff0c;进程守护&#xff0c;负载均衡等功能&#xff0c;在前端和nodejs的世界中用的很多 pm2安装 安装pm2: $ npm install -g pm2查看pm2的安装…

TinyLlama-1.1B(小羊驼)模型开源-Github高星项目分享

简介 TinyLlama项目旨在在3万亿tokens上进行预训练&#xff0c;构建一个拥有11亿参数的Llama模型。经过精心优化&#xff0c;我们"仅"需16块A100-40G的GPU&#xff0c;便可在90天内完成这个任务&#x1f680;&#x1f680;。训练已于2023-09-01开始。项目地址&#…

2024在视频号开店怎么样?平台现状如下,有电商经验者优先!

我是王路飞。 现在开网店、做电商的平台有很多&#xff0c;但是有着绝对流量优势的&#xff0c;除了抖音之外就是视频号了。 但是抖音跟视频号相比&#xff0c;已经属于一个很成熟的平台了&#xff0c;商家们也开始进入到内卷阶段了。 所以&#xff0c;如果你们2024年想做电…

列表进入详情页的传参问题(vue的问题)

<router-link :to"{path: detail, query: {id: 1}}">前往detail页面</router-link> c页面的路径为http://localhost:8080/#/detail?id1&#xff0c;可以看到传了一个参数id1&#xff0c;并且就算刷新页面id也还会存在。此时在c页面可以通过id来获取对应…

[AutoSar]基础部分 RTE 07 VFB虚拟功能总线

目录 关键词平台说明一、VFB1.1VFB是什么1.1VFB的好处1.2VFB的坏处 二、VFB在ECU内部的描述2.1Components2.2 Port-Interfaces2.3 Port2.4 Compositions 关键词 嵌入式、C语言、autosar、VFB 平台说明 项目ValueOSautosar OSautosar厂商vector芯片厂商TI编程语言C&#xff0…