koa框架会用也会写—(koa-bodyparser、koa-better-body)

╰+哭是因爲堅強的太久メ 2022-04-23 02:44 250阅读 0赞

## Koa中常用的中间件： ##

*  koa-session：让无状态的http拥有状态，基于cookie实现的后台保存信息的session
 *  koa-mysql:封装了需要用到的SQL语句
 *  koa-mysql-session：当不想让session存储到内存，而想让session存储到mysql数据库中时使用
 *  koa-router：后台会接受到各种请求的url，路由会根据不同的url来使用不同的处理逻辑。
 *  koa-view：请求html页面时，后台会用模板引擎渲染数据到模板上，然后返回给后台
 *  koa-static：请求img、js、css等文件时，不需要其他逻辑，只需要读取文件
 *  koa-better-body：post上传文件时，解析请求体

## koa系列文章： ##

*  [koa框架会用也会写—(koa的实现)][koa_koa]
 *  [koa框架会用也会写—(koa-router)][koa_koa-router]
 *  [koa框架会用也会写—(koa-view、koa-static)][koa_koa-view_koa-static]
 *  [koa框架会用也会写—(koa-bodyparser、koa-better-body)][koa_koa-bodyparser_koa-better-body]

## form标签的enctype属性 ##

*  application/x-www-form-urlencoded：在发送前编码所有字符（不设置默认）
 *  multipart/form-data：不对字符编码，在使用包含文件上传控件的表单时，必须使用该值。
 *  text/plain：空格转换为 "+" 加号，但不对特殊字符编码。

上面的文字看起来可能不够直观，所以可以自己发送请求来查看：

//前台页面login.html
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.css">
    </head>
    <body>
      <form action="/fileupload" enctype="text/plain" method="POST">
        <div class="form-group">
            <label for="username" class="control-label">用户名</label>
            <input type="text" class="form-control" id="username" name="username">
        </div>
        <div class="form-group">
            <label for="password" class="control-label">密码</label>
            <input type="text" class="form-control" id="password" name="password">
        </div>
        <div class="form-group">
            <label for="avatar" class="control-label">头像</label>
            <input type="file" multiple class="form-control" id="avatar" name="avatar">
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-danger">登录</button>
        </div>
      </form>
    </body>
    </html>
    复制代码

//后台服务
    
    const Koa = require('koa');
    const path = require('path');
    const Router = require('koa-router');
    const static = require('koa-static');
    const session = require('koa-session');
    
    let app = new Koa();
    let router = new Router();
    app.keys = ['zfpx','jw'];
    app.use(session({
      maxAge:5*1000,
    }, app));
    
    app.use(static(path.resolve(__dirname)));
    app.use(static(path.resolve(__dirname,'node_modules')));
    
    router.post('/login',async(ctx,next)=>{
      // 获取用户的账号及密码
      ctx.session.user = ctx.request.body
      ctx.body = ctx.session.user;
     
    });
    router.get('/home',async (ctx,next)=>{
        if (ctx.session.user){
            ctx.body = {
            status:1,
            username: ctx.session.user.username
            }
        }else{
            ctx.body = {
            status: 0,
            username: null
            }
        }
    })
    router.post('/fileupload',async(ctx,next)=>{
        console.log('upload')
    })
    app.use(router.routes());
    app.listen(3000);
    复制代码

![表单][1]

将login.html的form表单的enctype属性分别改成text/plain、application/x-www-form-urlencoded、multipart/form-data：

*  text/plain的请求体：空格转换为 "+" 加号，但不对特殊字符编码![text/plain][text_plain]
 *  application/x-www-form-urlencoded的请求体：在发送前编码所有字符（不设置默认）![application/x-www-form-urlencoded][application_x-www-form-urlencoded]
 *  multipart/form-data：不对字符编码，在使用包含文件上传控件的表单时，必须使用该值。![multipart/form-data][multipart_form-data] 从上面的图片可以看出来：

1.  一般的表单提交使用的application/x-www-form-urlencoded，比text/plain多了字符串进行编码
2.  application/x-www-form-urlencoded、text/plain提交文件时会把只把文件名提交，内容在请求体中看不到。但是multipart/form-data却可以

## koa-bodyparser和koa-better-body的区别 ##

*  koa-bodyparser没有处理文件上传的功能，而koa-better-body处理了文件上传功能
 *  koa-bodyparserh会将请求体挂载在ctx.request.body，而koa-better-body将请求体挂载在ctx.request.fields

## koa-bodyparser的原理 ##

//利用buffer来缓存数据，kao的中间件使用async和await
    function bodyParser() {
      return async (ctx, next) => {
        await new Promise((resolve, reject) => {
          let arr = [];
          ctx.req.on('data', function (data) {
            arr.push(data);
          });
          ctx.req.on('end', function () {
            let r = Buffer.concat(arr).toString();
            ctx.request.body = r;
            resolve();
          })
        });
        await next();
      }
    }
    复制代码

## koa-better-body的原理 ##

![multipart/form-data1][multipart_form-data]

![multipart/form-data2][multipart_form-data2]

从上面的两张图可以看到请求头中contentType中存在一个boundary属性，而请求体中的数据正是用这个boundary属性的值隔开的，去除里面的内容可以用分割的方法。由于文件是二进制的，需要分割buffer，但是Buffer的原型上没有这个方法，所以要扩展这个split方法:

Buffer.prototype.split = function (sep) {
      let len = Buffer.from(sep).length;    //分隔符的字节长度
      let pos = 0;
      let index = 0;
      let arr = [];
      //判断pos位后面是否还存在boundary
      //截取boundary前面的内容放在数组中
      while (-1 != (index = this.indexOf(sep,pos))) {
        arr.push(this.slice(pos,index));
        pos= len + index;//每个(**)b的位置
      }
      arr.push(this.slice(pos));//将最后boundary后面的内容放进数组
      return arr;
    }
    //b代表boundary，**代表获取的内容
    let buffer = Buffer.form('b**b**b**b--').split('b')
    console.log(buffer); 
    //[<Buffer >,<Buffer 2a 2a>,<Buffer 2a 2a>,<Buffer 2a 2a>,<Buffer 2d 2d>]
    复制代码

截取了需要的内容之后就可以做进一步的处理：

![koa-better-body][]

*  内容中包含filename的获取除绿色部分的内容
 *  内容中不包含filename的组成ctx.request.fields.xx = xx

## 结语 ##

koa框架会用也会写系列的内容基本就介绍完了，欢迎大家指正！

转载：https://juejin.im/post/5baf63a8f265da0acf0af160

[koa_koa]: https://juejin.im/post/5bab0c415188255c8473b123
[koa_koa-router]: https://juejin.im/post/5bad90b8f265da0aac6fe9ee
[koa_koa-view_koa-static]: https://juejin.im/post/5baefe335188255c6a0449c8
[koa_koa-bodyparser_koa-better-body]: https://juejin.im/post/5baf63a8f265da0acf0af160
[1]: https://user-gold-cdn.xitu.io/2018/9/29/1662536720bbd5be?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[text_plain]: https://user-gold-cdn.xitu.io/2018/9/29/1662537ce58fbd77?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[application_x-www-form-urlencoded]: https://user-gold-cdn.xitu.io/2018/9/29/1662539c8bc17ce4?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[multipart_form-data]: https://user-gold-cdn.xitu.io/2018/9/29/166255a746abb6a8?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[multipart_form-data2]: https://user-gold-cdn.xitu.io/2018/9/29/1662561d8fcf5294?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[koa-better-body]: https://user-gold-cdn.xitu.io/2018/9/29/16625b0e5fd0996d?imageView2/0/w/1280/h/960/format/webp/ignore-error/1