formData格式的传参

news/2024/4/19 6:41:24/文章来源:https://blog.csdn.net/Realizee/article/details/130372847

一般前端做  文件导入功能 / 上传功能 的时候会用到Formdata的格式,来上传文件和数据

会比较常用的两种方式:

let formData = new FormData(); // 当前为空

1. 直接表单传值

可以使用FormData.append来添加键/值对到表单里面;

//传数值
formData.append('name', id);
//传文件
formData.append('files', file);

2. 后端的多部分传参

和后端接口保持统一,那么可能不全是表单格式的数据, 可能设置的不同的格式,比如文件格式的文件和数据格式的数值,因此需要带格式传过去(new Blob方法)。

//传文件
formData.append('file-data', file);
//传数据(元数据格式)
formData.append('meta-data',new Blob([JSON.stringify(data)], { type: 'application/json' }) )


方法拓展:

1. FormData  对象将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据key/value,而独立于表单使用。如果表单enctype属性设为 multipart/form-data,则会使用表单的submit()方法来发送数据,从而发送数据具有同样形式。

  FormData.append(key,value)加数据,如果指定的key不存在则会新增一条数据,如果key存在,则追加到数据末尾.

  FormData.append(key)  从对象中删除指定键,即 key,和它对应的值,即 value

  FormData.has(key) 返回一个布尔值,表示该FormData对象是否含有某个key

  FormData.getAll(key)方法会返回该 FormData 对象指定 key 的所有值。

2. Blob  表示二进制类型的大对象。在数据库管理系统中,将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。

  Blob 使用场景: 分片上传,从互联网下载数据,Blob 用作 URL,Blob 转换为 Base64,图片压缩,生成 PDF 文档

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

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

相关文章

5款超实用电脑办公软件推荐

1.AIDA64 AIDA64是一款电脑软硬件检测工具,它不仅可以详细的显示出PC的每一个方面的信息,还提供了诸如协助超频,硬件侦错,压力测试和传感器监测等多种功能,以帮助我们对电脑整体性能进行全面评估。 2.傲梅分区助手 …

推荐几个可以免费使用的ChatGPT工具

在ChatGPT相关API推出之后,各种工具如雨后春笋一般层出不穷,这篇文章就列举一些日常使用到的工具。 工具列表 OpenAI 在线读取任意网页内容包括视频(YouTube),并根据这些内容回答你提出的相关问题或总结相关内容支持…

数据划分方法简述:数据离散化和均值标准差分级法(含python代码)

文章目录 1 问题缘起2. 数据离散化等距离散等频离散聚类离散其他 3. 均值标准差分级 1 问题缘起 在数学建模中,我经常遇到这样一个问题: 在某一步中,需要把数据分成好几个类别或者是按照数据大小分级划分。 放到一维数据中形象一点解释就是…

项目管理-团队管理

冲突和竞争 冲突:是指两个或两个以上的社会单元在目标上互不相容或互相排斥,从而产生心理上的或行为上的矛盾。冲突并不一定是有害的, “一团和气”的集体不一定是一个高效率的集体。对于有害的冲突要设法加以解决或减少;对有益的…

Photoshop如何使用基础功能?

文章目录 0.引言1.菜单栏2.工具箱 0.引言 笔者从开始科研时就接触过Photoshop(PS),这么多年一直用着感觉有些陌生,在每次使用PS时总感觉有些抵触,这状态说明还未入门。为了入门PS,笔者从头熟悉PS的菜单和工…

直播软件app开发:如何保证音视频质量?

随着社交媒体的发展,视频直播已成为越来越流行的社交方式。直播软件app开发也因此成为了一个热门话题。在开发直播软件app时,保证音视频质量是至关重要的。本文将介绍如何确保你的直播软件app在音视频质量方面表现出色。 确定音视频质量标准 首先&…

子元素选择器

知识点&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta http-equiv"X-UA-Compatible" content"IEedge"> <meta name"viewport" c…

GoodSync 数据自动同步备份工具VS傲梅轻松备份系统数据备份工具 哪款更好?

备份和同步软件的使用越来越广泛&#xff0c;因为在这个数据驱动的时代&#xff0c;数据的备份和恢复非常重要。在这里我想向大家推荐两款备份和同步软件——GoodSync和傲梅轻松备份。 GoodSync是一款备份和同步软件&#xff0c;它可以在多个设备之间同步文件、文件夹、照片、音…

heic格式转化jpg的3种好用方法

如果你是使用iOS手机的用户&#xff0c;那么一定对HEIC格式不陌生。虽然HEIC格式可以保存原始图像质量&#xff0c;但它只能在苹果手机或Mac电脑上打开。如果我们想要在安卓或Windows系统上打开&#xff0c;就需要使用转换软件将HEIC格式转换成常用的JPG格式。HEIC 是一种新型的…

每日学术速递4.26

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 Subjects: cs.CV 1.AutoNeRF: Training Implicit Scene Representations with Autonomous Agents 标题&#xff1a;AutoNeRF&#xff1a;使用自主代理训练隐式场景表示 作者&#xff1a;Pierre Marz…

macOS电脑

UNIX操作系统有一个规范&#xff0c;名叫《单一UNIX规范》&#xff08;Single UNIX Specification&#xff09;。凡是符合这个规范的操作系统都可以叫UNIX操作系统&#xff0c;并且可以通过UNIX官方认证。 UNIX商标认证官网是&#xff1a;The Register of UNIX Certified Prod…

Tuxera NTFS2023第三方应用苹果电脑磁盘读写工具

哪里有专业级的NTFS格式读写工具&#xff1f;Tuxera NTFS2023中文版是一款非常好用的NTFS读写工具&#xff0c;可以让您完整的读写兼容NTFS格式驱动器&#xff0c;对磁盘进行访问、编辑、存储和传输文件等操作。同时还包括开源磁盘管理器等简单的格式和硬盘维修检查和修复。Mac…

MySQL数据落盘原理(redo、undo、binlog、2PC、double write等。)

文章目录 前言一、架构图1、MySQL架构图2、InnoDB架构图 二、落盘分析1.第一阶段2.第二阶段3.第三阶段4.第四阶段5.第五阶段6.第六阶段 三、总结 前言 在上一章中我们聊到了事务有四大特性&#xff1a;原子性、一致性、隔离性、持久性。本篇文章就持久性重点聊一下&#xff0c…

【Feign扩展】OpenFeign日志打印Http请求参数和响应数据

SpringBoot使用log4j2 在Spring Boot中所有的starter 都是基于spring-boot-starter-logging的&#xff0c;默认使用Logback。使用Log4j2的话&#xff0c;你需要排除 spring-boot-starter-logging 的依赖&#xff0c;并添加 spring-boot-starter-log4j2的依赖。 配置依赖 <…

【小程序】input输入双向数据绑定

小程序中&#xff0c;input标签中的数据为单向绑定&#xff1a; <inputtype"number"bindinput"inputRealmoney"value"{{ amount }}"placeholder"请输入金额" />如上代码&#xff0c;我们绑定了输入框的数据amount&#xff0c;并…

Floccus插件 + 坚果云 实现不同浏览器间书签同步

&#xfeff; 在工作与学习中&#xff0c;我们时常希望在不同浏览器之间实现书签的同步&#xff1b;而一些传统的浏览器书签同步方案&#xff0c;或多或少都面临着一些问题——比如&#xff0c;Chrome浏览器尽管可以实现比较好的跨设备同步&#xff0c;但由于网络的限制可能导致…

多臂老虎机问题

1.问题简介 多臂老虎机问题可以被看作简化版的强化学习问题&#xff0c;算是最简单的“和环境交互中的学习”的一种形式&#xff0c;不存在状态信息&#xff0c;只有动作和奖励。多臂老虎机中的探索与利用&#xff08;exploration vs. exploitation&#xff09;问题一直以来都…

Java BIO

1.Java BIO(Blocking IO:同步并阻塞式IO)编程 1.1.基本介绍 1>.Java BIO就是传统的java io编程,其相关的类和接口在"java.io"包下; 2>.BIO(Blocking I/O): 同步阻塞,服务器实现模式为一个连接一个线程,即客户端有连接请求时服务器端就需要启动一个线程进行处…

centos配置nacos集群

nacos配置集群 1.官方文档地址 https://nacos.io/zh-cn/docs/cluster-mode-quick-start.html 2.环境准备 1.64 bit OS&#xff0c;支持 Linux/Unix/Mac/Windows。&#xff08;至少3台&#xff0c;或者通过修改端口在一台服务器 启动多个nacos进行测试&#xff09;。 2.64 bit …

Three.js+TypeScript+Webpack学习记录(三)

使用环境参考 Node.js v16.19.1 正文 独立功能文件 我们不可能一直在 index.ts 中写代码&#xff0c;分离文件&#xff1a; // init.ts import * as THREE from threeexport const initScene () > {const scene new THREE.Scene()scene.background new THREE.Color(wh…