跨境派

跨境派

跨境派,专注跨境行业新闻资讯、跨境电商知识分享!

当前位置:首页 > 工具系统 > 广告工具 > 前端 之 FormData对象浅谈

前端 之 FormData对象浅谈

时间:2024-04-01 20:50:36 来源:网络cs 作者:欧阳逸 栏目:广告工具 阅读:

标签: 对象  浅谈 

一、简介

​ 通常情况下,前端在使用post请求提交数据的时候,请求都是采用application/jsonapplication/x-www-form-urlencoded编码类型,分别是借助JSON字符串来传递参数或者key=value格式字符串(多参数通过&进行连接)来传递参数,确实足以覆盖大多数业务场景。但是在文件上传等特殊业务场景下,这两种编码类型就有些捉襟见肘了,例如选择JSON字符串传递参数,在使用JSON.stringify()格式化参数数据时,会将FileBlob对象转化成{},文件数据会丢失。所以此时我们就需要使用第三种编码类型multipart/form-data,使用FormData对象来传递参数。

FormData 提供了一种以 key/value键值对集合表示表单数据的数据构造方式,通过该方式我们可以将fileblob等不易传输的数据通过 ajax 请求轻松的发送到服务器端。

​ 当使用FormData 对象作为参数时,无需手动设置请求的编码类型,浏览器会自动将请求的编码类型Content-type设置为multipart/form-data

浏览器兼容性:

在这里插入图片描述

二、相关方法

1、FormData()

FormData([form]) 方法是FormData 对象的构造函数,用来创建一个新的FormData 对象。

// 创建空的 FormData 对象const formData = new FormData()

​ 该方法拥有一个可选参数form,值为页面HTML中的一个<form>表单元素,当设置该参数时,创建的FormData对象将自动的将form表单中的值包含进去,包括file文件内容也会被编码之后包含进去。但是要注意给表单中所有的输入元素(<input><textarea>)设置name属性,否则无法被FormData对象包含,输入元素的name属性将会成为FormData对象中数据键值对的key,输入元素的值将会成为对应的value

<!-- form表单元素 --><form action="#" id="form1">    <div>      <label for="name">姓名:</label>      <input type="text" id="name" name="name">    </div>    <div>      <label for="age">年龄:</label>      <input type="text" id="age" name="age">    </div>    <div>      <label for="sex">性别:</label>      <!-- 未设置name属性不会被 formData 包含 -->      <input type="text" id="sex">    </div>  </form>  <br />  <button onclick="logFormData()">输出formData对象</button><script>// 输出 FormData 对象的数据function logFormData () {// 获取表单元素const form = document.getElementById('form1')// 创建带有预置数据的 FormData 对象  const formData = new FormData(form)  // 输出formData对象中的所有键值对  for (var pair of formData.entries()) {    console.log(pair[0] + '----' + pair[1]);  }}</script>
执行结果:

在这里插入图片描述

2、FormData.append()

FormData.append(name,value,[filename]) 方法用于向FormData 对象中添加一个新的值,该方法拥有两个必选参数namevalue,以及一个可选参数filenamename对应FormData 对象中键值对数据的keyvalue对应键值对数据的值。如果name这个keyFormData中已经存在,则会将新值value添加到原有值集合的后面,先添加的值在前面,后添加的值在后面,多个值同时以集合的形式存在;如果name这个key在FormData中不存在,则会新增这个key,并赋予对应的值value

// 创建空的 FormData 对象const formData = new FormData()// 添加一个键值对 此时并不存在对应的key 会新增这个keyformData.append('name', '张三')// 给同一个key 再次添加值formData.append('name', '李四')// 输出这个key对应的所有value值console.log("formData.getAll('name')----", formData.getAll('name'));
执行结果:

在这里插入图片描述

​ 可选参数filename是当第二个参数valueBlobfile文件数据时,设置传给服务器端的文件名称。如果不设置该参数,则Blob类型默认文件名为blobfile类型的默认文件名为文件本身的名称。

// 创建空的 FormData 对象const formData = new FormData()// 添加一个file键值对数据 取默认文件名称formData.append('file', file)// 添加一个file键值对数据 并设置文件名称formData.append('file', file, 'test.png')// 输出这个key对应的所有value值console.log("formData.getAll('file')----", formData.getAll('file'));
执行结果2:

在这里插入图片描述

3、FormData.set()

FormData.set(name,value,[filename]) 方法与FormData.append()方法类似,都是用于向FormData 对象中添加一个新的值,如果name这个key在FormData中不存在,则会新增这个key,并赋予对应的值value;但是如果name这个key在FormData中已经存在,那么该方法会直接覆盖掉原来的value,无论原有值集合有几个数据,全都被覆盖。

​ 其余用法与FormData.append()方法相同。

// 创建空的 FormData 对象const formData = new FormData()// 使用append()添加一个键值对 此时并不存在对应的key 会新增这个keyformData.append('name', '张三')// 使用append()给同一个key 再次添加值formData.append('name', '李四')// 输出这个key对应的所有value值console.log("append()两次数据后----", formData.getAll('name'));// 使用set()给同一个key 设置值 会覆盖之前的值formData.set('name', '王五')// 输出这个key对应的所有value值console.log("set()一次数据后----", formData.getAll('name'));
执行结果:

在这里插入图片描述

4、FormData.delete()

FormData.delete(name) 方法用于从FormData对象中删除name这个key及其对应的所有value

// 创建空的 FormData 对象const formData = new FormData()// 使用append()添加一个键值对 此时并不存在对应的key 会新增这个keyformData.append('name', '张三')// 使用append()给同一个key 再次添加值formData.append('name', '李四')// 输出这个key对应的所有value值console.log("append()两次数据后----", formData.getAll('name'));// 使用delete()删除一个key及其所有的valueformData.delete('name')// 再次输出这个keyconsole.log("delete()删除一次后----", formData.getAll('name'));
执行结果:

在这里插入图片描述

5、FormData.entries()

FormData.entries() 方法用于获取一个由FormData对象中所有键值对组成的iterator(迭代器)对象,然后通过该对象可以遍历访问所有的键值对数据。

​ 该方法获取的iterator(迭代器)对象,需要通过for...of..的形式来进行遍历,每个遍历元素都是数组类型,数组中有两个元素,第一个为key,另一个为value。如果FormData对象中的某个key有多个value,则该key会被遍历多次,每次只对应一个value

// 创建空的 FormData 对象const formData = new FormData()// 使用append()添加一个键值对formData.append('name', '张三')// 使用append()给同一个key 再次添加值formData.append('name', '李四')// 使用append()添加另外一个键值对formData.append('sex', '男')// 获取迭代器对象const entries = formData.entries()// 输出迭代器对象console.log('entries-----', entries);// 遍历迭代器对象for (var pair of entries) {  // 输出遍历元素console.log('pair---', pair);  // 输出元素的key和valueconsole.log(pair[0] + '----' + pair[1]);}
执行结果:

在这里插入图片描述

​ 除了该方法外,我们还可以通过for...of..形式直接遍历FormData对象,其作用与结果与该方法完全相同

// 创建空的 FormData 对象const formData = new FormData()// 使用append()添加一个键值对formData.append('name', '张三')// 使用append()给同一个key 再次添加值formData.append('name', '李四')// 使用append()添加另外一个键值对formData.append('sex', '男')// 遍历formData对象for (var pair of formData) {console.log('当前遍历元素---', pair);console.log(pair[0] + '----' + pair[1]);}
执行结果2:

在这里插入图片描述

6、FormData.keys()

FormData.keys() 方法用于获取一个由FormData对象中所有键值对中的key组成的iterator(迭代器)对象,然后通过该对象可以遍历访问所有的key,类型为String。与entries()方法相同的是:如果FormData对象中的某个key有多个value,则该key会被遍历多次,每次对应一个value

// 创建空的 FormData 对象const formData = new FormData()// 使用append()添加一个键值对formData.append('name', '张三')// 使用append()给同一个key 再次添加值formData.append('name', '李四')// 使用append()添加另外一个键值对formData.append('sex', '男')// 获取key组成的迭代器对象const keys = formData.keys()// 输出迭代器对象console.log('keys-----', keys);// 遍历迭代器对象for (var key of keys) {console.log('key---', key);}
执行结果:

在这里插入图片描述

7、FormData.values()

FormData.values() 方法用于获取一个由FormData对象中所有键值对中的value组成的iterator(迭代器)对象,然后通过该对象可以遍历访问所有的value,类型为StringFileBlob。如果FormData对象中的某个key有多个value,则每个value都会遍历一次。

// 创建空的 FormData 对象const formData = new FormData()// 使用append()添加一个键值对formData.append('name', '张三')// 使用append()给同一个key 再次添加值formData.append('name', 333444)// 使用append()添加另外一个键值对formData.append('sex', '男')// 获取value组成的迭代器对象const values = formData.values()// 输出迭代器对象console.log('values-----', values);// 遍历迭代器对象for (var value of values) {console.log('value---', value);}
执行结果:

在这里插入图片描述

8、FormData.has()

FormData.has() 该方法用于判断FormData 对象中是否含有某个key,返回值为一个布尔值。

// 创建空的 FormData 对象const formData = new FormData()// 使用append()添加一个键值对formData.append('name', '张三')// 使用append()添加另外一个键值对formData.append('sex', '男')// 使用has()判断是否存在某个keyconsole.log('has()判断是否存在name---', formData.has('name'));// 使用delete()删除一个key及其所有的valueformData.delete('sex')// 使用has()判断一个已经被删除的keyconsole.log('has()判断被delete()删除的sex---', formData.has('sex'));// 使用has()判断一个不存在的keyconsole.log('has()判断不存在的age---', formData.has('age'));
执行结果:

在这里插入图片描述

9、FormData.get()

FormData.get(name) 方法用于获取FormData 对象中name这个key所对应的value集合里的第一个valuevalue集合中值的顺序,按照添加的顺序进行排序。

// 创建空的 FormData 对象const formData = new FormData()// 使用append()添加一个键值对formData.append('name', '张三')// 使用append()给同一个key 再次添加值formData.append('name', 333)// 使用append()添加另外一个键值对formData.append('sex', '男')// 使用get()获取name对应的第一个valueconsole.log('get()获取name对应的第一个value---', formData.get('name'));// 使用get()获取sex对应的第一个valueconsole.log('get()获取sex对应的第一个value---', formData.get('sex'));
执行结果:

在这里插入图片描述

10、FormData.getAll()

FormData.getAll() 方法用于获取FormData 对象中name这个key所对应的value集合,value集合中值的顺序,按照添加的顺序进行排序。

// 创建空的 FormData 对象const formData = new FormData()// 使用append()添加一个键值对formData.append('name', '张三')// 使用append()给同一个key 再次添加值formData.append('name', 333)// 使用append()添加另外一个键值对formData.append('sex', '男')// 使用getAll()获取name对应的value集合console.log('getAll()获取name对应的value集合---', formData.getAll('name'));// 使用getAll()获取sex对应的value集合console.log('getAll()获取sex对应的value集合---', formData.getAll('sex'));
执行结果:

在这里插入图片描述

三、相关资料

FormData

form

FormData对象进阶

本文链接:https://www.kjpai.cn/news/2024-04-01/152331.html,文章来源:网络cs,作者:欧阳逸,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。

上一篇:【串防】WXWX

下一篇:返回列表

文章评论