FormData上传文件以及其他参数

FormData介绍

<form id="myForm" action="" method="post">
    <input type="text" name="name">名字
    <input type="password" name="psd">密码
</form>
<script>
// 获取页面已有的一个form表单
let form = document.getElementById("myForm");
// 用表单来初始化
let formData = new FormData(form);
// 我们可以根据name来访问表单中的字段
let name = formData.get("name"); // 获取名字
let psd = formData.get("psd"); // 获取密码
// 当然也可以在此基础上，添加其他数据
formData.append("token", "112s");
</script>

• FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。

FormData使用

let formdata:FormData= new FormData()
      // 添加数据方法
      // 添加数据，指定的key不存在会新增一条数据，如果存在则会添加到数据末尾
      formdata.append('key1', '11')
      //通过set(key, value)来设置修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值。
      formdata.set('key2', '22')
      formdata.set('key2', '333')
      //获取数据
      formdata.getAll("key2"); // ["22", '333']
      formdata.get("key2"); // 22
      //判断某个Key值是否存在
      formdata.has('key2') //true
      formdata.has('key3') //false
      //删除数据
      formdata.delete("key1")
      //遍历
      /*
      迭代器规则
      每调用一次next()返回一条数据，数据的顺序由添加的顺序决定
      返回的是一个对象，当其done属性为true时，说明已经遍历完所有的数据，这个也可以作为判断的依据
      返回的对象的value属性以数组形式存储了一对key/value，数组下标0为key，下标1为value，如果一个key值对应多个value，会变成多对key/value返回
      */
      var i = formdata.entries();
      i.next(); // {done:false, value:["k1", "v1"]}
      i.next(); // {done:fase, value:["k1", "v2"]}
      i.next(); // {done:fase, value:["k2", "v1"]}
      i.next(); // {done:true, value:undefined}

      // 实例有一个接口需要传输文件和文件名称、备注
      const parmas = new FormData()
      parmas.append('name', 'a.txt')
      parmas.append('res', '这里是备注')
      parmas.append('file', new Blob())
      // ajax中头部要加
      //类型为form-data;headers: {'Content-Type': 'multipart/form-data'}
      //responseType: 'blob' 返回的数据为Blob类型
      api(parmas)