更新于

koa框架18 FormData

发布于 / 分类: Node / 暂无评论 / 阅读量: 63

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

暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了327篇文章

共有545条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
设置
配色方案

布局