FormData是一种容器，用于模拟表单，向服务器发送数据，简单点来讲，他就是一个对象，键值对形式的对象。
创建方式
- new出一个FormData对象，然后手动传入参数
- 直接使用一个from元素转成FormData对象
使用方式
原生ajax配合使用
let form = new FormData();
form.append("name","mulingyuer");
form.append("pass","123456");
let xhr = new XMLHTTPRequest();
xhr.open("post","/a",true);
xhr.send(form);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200 && xhr.status < 300 || xhr.status == 304){
alert(xhr.responseText);
}else {
alert("失败");
}
}
}
前端js创建FormData对象，并且使用append方式，传入键值对数据，然后通过原生的ajax对象，发起post请求。
后端的话，我们直接读取ctx.request.fields就可以获取到提交过来的数据了。
router.post("/a",async ctx=>{
console.log(ctx.request.fields);
ctx.body = "上传成功"
});
此时后端输出如下数据
{ name: 'mulingyer', pass: '123456' }
注意一点，我们需要使用koa-better-body
fetch方式
let form = new FormData();
form.append("name","mulingyuer");
form.append("pass","123456");
(async () => {
let res = await fetch("/a", {
method: "post",
body: form
})
let text = await res.text();
console.log(text);
})()
由于fetch的方式，我们需要对返回的对象进行数据转换，由于后端返回的是文本，所以要使用text方式，如果是json，则使用json
然后再输出。
后端不用改变。
jq的ajax
let form = new FormData();
form.append("name","mulingyuer");
form.append("pass","123456");
(async () => {
let data = await $.ajax({
url: '/a',
type: 'post',
data: form,
//禁止处理数据（默认按照json）
processData: false,
//禁止定义头（urlencoded）
contentType: false
});
alert(data);
})();
jq的话也是利用async转换，然后由于jq默认会有对上传的数据修改（转换格式），所有要禁止他的修改，上传没有改动的FormData对象。
from元素转换
其实很简单，我们只需要js获取表单form的dom，在new出FormData对象是，作为参数传入，此时这个form元素就会自动转换。
<form id="form1">
用户名：<input type="text" name="name" /><br/> 密码：
<input type="password" name="pass" /><br/> 头像：
<input type="file" name="f1" multiple /><br/>
<input type="button" value="提交" id="btn1" />
</form>
let oBtn = document.getElementById('btn1');
oBtn.onclick = async function() {
let form=new FormData(document.getElementById('form1'));
let res = await fetch("/a", {
method: "post",
body: form
});
let text = await res.text();
console.log(text);
}
文件上传
文件的话，直接使用form元素转的话就不用考虑那么多了，直接和上面一样写法，如何是自己手动创建FormData对象，我们需要考虑到多文件的情况。
let oBtn = document.getElementById('btn1');
oBtn.onclick = async function() {
//let form=new FormData(document.getElementById('form1'));
let form = new FormData();
form.append('name', document.getElementsByName('name')[0].value);
form.append('pass', document.getElementsByName('pass')[0].value);
//将
Array.from(document.getElementsByName('f1')[0].files).forEach(file => {
form.append('f1', file);
});
let res = await fetch('/a', {
method: 'post',
body: form
});
let data = await res.text();
alert(data);
};
Array.from将文件dom转为数组，然后for循环，然后依次传入，最后上传。
