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

koa框架18 FormData

144 0

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

0
  • 本文分类:Node
  • 本文标签:nodekoaFormData
  • 流行热度:已超过 144 人围观了本文
  • 最后更新:2020年08月19日 - 17时14分35秒
  • 发布日期:2020年08月19日 - 17时14分35秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码