koa框架18 FormData

FormData是一种容器，用于模拟表单，向服务器发送数据，简单点来讲，他就是一个对象，键值对形式的对象。

创建方式

1. new出一个FormData对象，然后手动传入参数
2. 直接使用一个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循环，然后依次传入，最后上传。