「前端」FormData对象使用指南

本文链接： https://blog.csdn.net/qq_26377547/article/details/100149292

最近在项目的开发过程中遇到了一个需求：前端向后端用POST方法发送数据的时候，需要用到FormData，因为在以往的项目中没有遇到过使用FormData传递数据的情况，因此特意补了一下这方面的知识，码起来备忘。

文章参考自：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

FormData 接口提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用 XMLHttpRequest.send() 方法送出，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 “multipart/form-data”，它会使用和表单一样的格式。

如果你想构建一个简单的GET请求，并且通过的形式带有查询参数，可以将它直接传递给URLSearchParams。

实现了 FormData 接口的对象可以直接在for…of结构中使用，而不需要调用entries() : for (var p of myFormData) 的作用和 for (var p of myFormData.entries()) 是相同的。

以上都是大家不爱看的废话，下面我们来讲点实用的：

`FormData`为我们提供了9个实用的`API`：

FormData.append()
- 向FormData中添加新的属性值，FormData对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。
FormData.delete()
- 从FormData对象里面删除一个键值对。
FormData.entries()
- 返回一个包含所有键值对的iterator对象。
FormData.get()
- 返回在FormData对象中与给定键关联的第一个值。
FormData.getAll()
- 返回一个包含FormData对象中与给定键关联的所有值的数组。
FormData.has()
- 返回一个布尔值表明FormData对象是否包含某些键。
FormData.keys()
- 返回一个包含所有键的iterator对象。
FormData.set()
- 给FormData设置属性值，如果FormData对应的属性值存在则覆盖原值，否则新增一项属性值。
FormData.values()
- 返回一个包含所有值的iterator对象。

好了，FormData对象提供的几个实用的API已经初步介绍完了，至于介绍中的iterator对象，不清楚的小伙伴可以转战这里：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols

接下来到了每个`API`单独讲解如何使用的时候了：

构造函数FormData():

	//	用法1 创建一个空的FormData对象
	var formData = new FormData();
	//	用法2
	//	此处的form指的是html中的form表单元素
	//	这种方式创建的FormData对象会自动将form中的表单值也包含进去
	//	包括文件内容也会被编码之后包含进去
	var formData = new FormData(form);

formData.append():

	//	参数name是指value中包含的数据对应的表单名称
	//	参数value是指表单的值 可以是USVString或Blob(包括子类型，如 File)
	//	参数filename(可选)是指传给服务器的文件名称(一个 USVString)
	//	当一个Blob或File被作为第二个参数的时候
	//	Blob对象的默认文件名是"blob" File对象的默认文件名是该文件的名称
	formData.append(name, value, filename);

formData.delete():

	//	参数name是指需要删除的键(key)的名字
	formData.delete(name);

formData.entries():

（留坑待填）