FormData使用教程

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主要用途

1. 将form表单元素的name和value组合成键值对，实现表单数据序列化，提高开发效率。

2. 异步上传文件。

二、FormData用法详解

1. 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对象。

2. 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
//创建表单

    
商品名称：
    
商品数量：
        1
        2
        3
        4
    
    
商品价格：
        100
        200
        300
        400
    
    


//表单原生作为参数初始化FormData

3. 使用详解

//通过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
}

4. 通过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);
    }
}

5. 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'

  });
}

6. 兼容性
   由于 FormData 是 Ajax 2.0 新增的接口，低于IE10 的IE浏览器都不支持 FormData ，IE10以上支持append方法，其他方法全不支持。

   
   
   

   兼容性