我转过几个弯绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留喝过几壶酒
不过年少白头道义放胸口
倘若明天之后遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候我叹这天道默悠悠
能否与我一醉方休
又过了几个弯算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休

koa框架18 FormData

木灵鱼儿

267 天前Node

521 0 0

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循环，然后依次传入，最后上传。