FormData 对象之文件上传

writeHeader: 表单数据以键值对的形式向服务器发送，这个过程是浏览器自动完成的。但是有时候，我们希望通过脚本完成过程，构造和编辑表单键值对，然后通过XMLHttpRequest.send()方法发送。浏览器原生提供了 FormData 对象来完成这项工作。

用户上传文件，也是通过表单。具体来说，就是通过文件输入框选择本地文件，提交表单的时候，浏览器就会把这个文件发送到服务器。

<input type="file" id="file" name="myFile">

选择文件之后，将文件放入formData

file.onchange = function (e) {
    console.log(e.target.files)
    let formData = new FormData();
    formData.append('file', e.target.files[0])
    // 将formData发送给后端post接口，将完成上传
    // 记得将接口请求haders中的Content-type值改为application/x-www-form-urlencoded
    console.log(formData.get('file'))
}

注意：input（type=file）选中相同的文件将不会触发onchange事件可以将input的value重置为空

file.value = ''

附录

• FormData.get(key)：获取指定键名对应的键值，参数为键名。如果有多个同名的键值对，则返回第一个键值对的键值。
• FormData.getAll(key)：返回一个数组，表示指定键名对应的所有键值。如果有多个同名的键值对，数组会包含所有的键值。
• FormData.set(key, value)：设置指定键名的键值，参数为键名。如果键名不存在，会添加这个键值对，否则会更新指定键名的键值。如果第二个参数是文件，还可以使用第三个参数，表示文件名。
• FormData.delete(key)：删除一个键值对，参数为键名。
• FormData.append(key, value)：添加一个键值对。如果键名重复，则会生成两个相同键名的键值对。如果第二个参数是文件，还可以使用第三个参数，表示文件名。
• FormData.has(key)：返回一个布尔值，表示是否具有该键名的键值对。
• FormData.keys()：返回一个遍历器对象，用于for...of循环遍历所有的键名。
• FormData.values()：返回一个遍历器对象，用于for...of循环遍历所有的键值。
• FormData.entries()：返回一个遍历器对象，用于for...of循环遍历所有的键值对。如果直接用for...of循环遍历 FormData 实例，默认就会调用这个方法。