FormData是Ajax2.0(XMLHttpRequest Level2)提供的一种将form表单元素name和value组合成键值，实现表单数据的序列化，从而减少from表单元素的拼接，提高工作效率对的接口，以方便将form表单数据通过XMLHttpRequest.send() 方法发送到后端，可以使用该对象来处理form表单元素并方便的进行文件上传。
XMLHttpRequest 是一个浏览器接口，通过它，我们可以使用Javascript进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月，XMLHttpRequest Level 2 草案提出来了，相对于上一代，它有一些新的特性，其中FormData 就是XMLHttpRequest Level 2 新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。
一、FormData主要用途
将form表单元素的name和value组合成键值对，实现表单数据序列化，提高开发效率。
异步上传文件。
二、FormData用法详解
- FormData方法
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的初始化
//通过FormData()构造函数创建空的formData对象
let formData = new FormData();
//通过append()方法新增属性
formData.append('userName', 'Iron man');
//通过get()方法对值读取属性
console.log(formdata.get("userName"));
//通过delete()方法删除属性
formData.delete('userName');
//通过set()方法对值设置属性
formdata.set("userName","钢铁侠");
console.log(formdata.get("userName"));
//通过form表单初始化FormData
//创建表单
<form id="carList">
<p>商品名称：<input type="text" name="productName" value="耐克"></p>
<p>商品数量：<select name="productNumber">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></p>
<p>商品价格：<select name="productPrice">
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select></p>
<p><input type="button" id="payment" value="支付"></p>
</form>
//表单原生作为参数初始化FormData
<script>
//获得表单按钮元素
var paymentBtn = document.getElementById("payment");
//为按钮添加点击事件
paymentBtn.onclick=function(){
//根据ID获得页面当中的form表单元素
var form = document.querySelector("#carList");
//将获得的表单元素作为参数，对formData进行初始化
var formData = new FormData(form);
//获取商品名称
console.log(formData.get("productName"));//耐克
//获取商品数量
console.log(formData.get("productNumber"));//3
//获取商品价格
console.log(formData.get("productPrice"));//400
}
</script>
- 使用详解
//通过append('key','value')添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值
var formData = new FormData();
formData.append('userName','hhp');
formData.append('userName','li');
formData.append('age','20');
formData.append('age','30');
formData.append('gender','man')
//如果一个key写入多个value 通过get()方法只会获取到第一个写入的value
console.log(formData.get("userName"));//hhp
console.log(formData.get("age"));//20
//通过getall()可以读取当前key所有的值，以数组的形式输出
console.log(formData.getAll("userName"));//["hhp", "li"]
console.log(formData.getAll("age"));//["20", "30"]
console.log(formData.getAll("gender"));//["man"]
formData.append('gender','woman');
console.log(formData.getAll('gender'));//["man","woman"]
//通过set()方法给 FormData 设置属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值。同时如果以前存在多个值都会被set进的新值覆盖。
formData.set('gender','super man');
console.log(formData.getAll('gender'));//["super man"]
//通过has()方法返回一个布尔值表明 FormData 对象是否包含某些键
console.log(formData.has('userName'));//true
console.log(formData.has('stature'));//false
//通过delete()方法从 FormData 对象里面删除一个键值对
formData.append('stature',185);
formData.append('stature',184);
console.log(formData.get('stature'));//185
console.log(formData.getAll('stature'));//["185","184"]
//会删除当前key下所有的值
console.log(formData.delete('stature'));//undefined
console.log(formData.getAll('stature'));//[]
console.log(formData.values());//返回当前表单数据对象所有的值
console.log(formData.entries());//
for (var ele of formData.entries()){
console.log(ele);//["userName", "hhp"]["userName", "li"]["age", "20"]["age", "30"]["gender", "super man"]
console.log(ele[0] + '==' + ele[1]);//userName==hhp userName==li age==20 age==30 gender==super man
}
- 通过XMLHttpRequest发送数据
var paymentBtn = document.getElementById("payment");
//为按钮添加点击事件
paymentBtn.onclick=function(){
//根据ID获得页面当中的form表单元素 当前元素就是上面第二条的form表单
var form = document.querySelector("#carList");
//将获得的表单元素作为参数，对formData进行初始化
var formData = new FormData(form);
var xml = new XMLHttpRequest();
xml.open('POST', "http:172.168.0.1");
xml.send(formData);
xml.onload = function (){
console.log(xml.status);
}
}
- FormData上传图片
//将图片转为blob格式
export function getBlob(url) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
return new Promise((resolve, reject) => {
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
resolve(xhr.response); // 返回值
}
};
});
}
//fileFront.path图片的临时路径
const fileBlob = await getBlob(fileFront.path)
const fileType = fileFront.type === 'image/png' ? '.png' : '.jpg';
const formData = new FormData();
formData.append('url','/nurse-coming-web/upload/imageUpload');
formData.append('file', fileBlob, Date.now() + fileType);
//
const front = await uploadImage(formData).then((data: any) => {
console.log(data);
})
export function uploadImage(query) {
return request({
url: `/nurse-coming-web/upload/imageUpload`,
options: {
method: 'POST',
data: query,
},
// headers: {//上传图片不需要主动加contenttype
// 'Content-Type': "multipart/form-data;"
// },
api: 'nurseComingApi'
});
}
-
兼容性
由于 FormData 是 Ajax 2.0 新增的接口，低于IE10 的IE浏览器都不支持 FormData ，IE10以上支持append方法，其他方法全不支持。
兼容性
