FormData使用

最新推荐文章于 2023-10-14 21:47:32 发布
最新推荐文章于 2023-10-14 21:47:32 发布
阅读量269 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41552977/article/details/103664235
版权

FormData使用

在vue+element的项目开发过程中，遇到文件上传的需求，搜了老半天发现FormData出现的频率很高。

一、主要用途

  1. 将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率
  2. 异步上传文件

二、FormData使用

1、创建formData对象
创建一个空对象
2、通过表单对formData进行初始化
在这里插入图片描述
注意是通过name属性来绑定选中的元素
在这里插入图片描述

三、FormData操作方法

1、通过get(key)与getAll(key)来获取相对应的值
在这里插入图片描述
2、通过append(key,value)在数据末尾追加数据
在这里插入图片描述
3、通过set(key, value)来设置修改数据

key的值不存在，会添加一条数据
在这里插入图片描述
key的值存在，会修改对应的value值
在这里插入图片描述
4、通过has(key)来判断是否存在对应的key值
在这里插入图片描述
5、通过delete(key)可以删除数据
在这里插入图片描述

小圆么
关注
Vue 使用formData方式向后台发送数据的实现
10-17
总结一下，Vue中使用`FormData`发送数据到后台的关键步骤包括： 1. 创建`FormData`对象。 2. 使用`append`方法添加数据，包括文件和普通文本。 3. 使用axios或其他HTTP库发送POST请求，将`FormData`对象作为请求体。...
使用FormData实现上传多个文件
10-17
本篇文章将详细介绍如何使用`FormData`来实现上传多个文件的功能。 首先，我们要明白`FormData`的基本用法。`FormData`对象用于存储键值对，特别适用于发送数据到服务器，尤其是当数据包含文件时。创建一个`...
FormData()方法 ——将数据以Key=value 的方式通过XMLHttpRequest对象发送给服务器
zhuxufeifei的博客
08-19 1563
FormData()方法 ——将数据以Key=value 的方式通过XMLHttpRequest对象发送给服务器 注： 一、无form标签时: var 对象名 = new FormData(); 对象名.append(‘key’,value); 二、有form标签时： var 对象名= new FormData(表单对象); 元素的name自动转换为key； html代码 &lt...
FormData——编辑表单数据
王小森的成长博客
07-26 2588
formData对象的创建。 //创建空对象 let formData= new FormData(); //对空对象添加数据 formData.append("file","value","filename") //file就是上传数据的name值，value就是上传的数据，filename就是上传的文件名（可选）。 //或者序列化form表格 <form id="advForm">...
前端基础二：fromData使用详解
最新发布
2201_75705263的博客
10-14 1611
把属性和属性值进行数组结合，高效传输FormData的主要用途有两个：1、将form元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。2、异步上传文件。
js FormData 使用笔记
天高海阔 扬帆远行
10-14 6315
formdata使用笔记。
FormData使用方法详解
bigcarp的专栏
03-18 5638
https://www.jianshu.com/p/e984c3619019 FormData的主要用途有两个： 1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。 2、异步上传文件 一、创建formData对象 1、创建一个空对象： //通过FormData构造函数创建一个空对象 var formdata=new FormData(); //可以通过append()方法来追加数据 formdata.append("name.
使用axios请求时,发送formData请求的示例
10-16
本篇文章将详细讲解如何使用`axios`来发送`FormData`请求。 `FormData`是一种特殊的JavaScript对象，它允许我们构建键值对，以模拟HTML表单提交的数据格式。这对于上传文件或发送包含多个部分的数据尤其有用。下面...
JS FormData对象使用方法实例详解
11-21
下面我们将详细探讨`FormData`对象的使用方法。 ### 1. 创建FormData对象 创建`FormData`对象很简单，只需要通过`FormData`构造函数即可创建一个空的对象： ```javascript var formdata = new FormData(); ``` ...
FormData用法详解
前端开发
03-21 8万+
FormData 对象： 一.创建一个formData对象实例的方式 1、创建一个空对象 var formData = new FormData();//通过append方法添加数据 2、使用已有表单来初始化对象 //表单示例 &lt;form id="myForm" action="" method="post"&gt; &lt;input type="text" name...
关于Formdata的使用心得
指尖的星光的博客
09-22 2638
前言 正文 1、在前端通过ajax或者fetch发送请求时，我们更习惯把数据存在放formData中。存放方式如下： //这是通过fetch发送请求，request只是在外层包装了一下 async function checkboxSingle(param) { let formData = new FormData(); formData.append("name","lis"); ...
FormData使用详解
ALEX_wxy的博客
01-15 743
$scope.uploadImages = function () { //new FormData(document.getElementById("formImage")) let form = document.getElementById("formImage"); let formData = new FormData(form); ...
new FormData() - FormData对象的作用及用法
热门推荐
AlbenXie的博客
08-27 8万+
一、js FormData方法介绍 1. 概述 FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。 2. 构造函数 创建一个formData对象实例有几种方式： 1、创建一个空对象实例 var formData = new FormData(); 此时可以调用append()方法来添加数...
java中的堆和栈
kikumaru714的博客
11-20 135
操作系统给jvm分配了一块内存。jvm又将这块内存分成五部分，包括：寄存器（和我们java无关），本地方法栈(JVM调用操作系统的功能，java也用不到)，方法和数据共享区（class文件进入的地方），方法栈（所有方法运行时进入的内存），堆（存对象和数组）。 JVM在运行java程序时，先将class文件放入 方法和数据共享区，然后，方法是放在方法栈中的，而java程序的入口是main方法，所以main方法是第一个分配到栈中的，也叫面方法压栈运行。之后就是各种基本数据类型，引用类型的变量。而栈中存放的则是
使用FormData
ChaoQun
12-28 1069
FormData
JavaScript—异步提交表单的6种方式
weixin_30446613的博客
09-14 634
FormData的详细介绍及使用请点击此处，那里对FormData的方法和事件已经表述的非常清楚，这里就不再浪费时间在介绍一遍了。本文主要针对FormData对象的使用以及异步文件上传进行详细的说明。 FormData对象可以让我们组织一个使用XMLHttpRequest对象发送的键值对的集合。它主要用于发送表单数据,但是可以独立于使用表单传输的数据。 1、从头开始创建一个F...
H5 FormData对象的作用及用法
前端开发技术
08-09 1万+
H5 FormData对象就模拟一个原始的表单格式的数据，以前上传文件非得要用个form包起来，就是和后台约定的一个传输数据格式， FormData就是按照规定的格式，把form中所有表单元素的name与value组装成一个queryString，省去你手工拼接的工作，如果用 过jquery的话，应该知道有个表单序列号的函数，作用和它是一样的，不过FormData还提供了更多的操作方法，全部在
formdata怎么使用
06-02
在上述代码中，我们通过 append() 方法向 FormData 对象中添加表单数据和文件数据，然后使用 XMLHttpRequest 对象发送 Ajax 请求，并将 FormData 对象作为参数传递给 send() 方法。 注意：FormData 对象只能用于 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值