koa框架會用也會寫—(koa-bodyparser、koa-better-body)

時間 2019-11-16

標籤 koa 框架會用 bodyparser better body 简体版

原文原文鏈接

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系列文章：

form標籤的enctype屬性

application/x-www-form-urlencoded：在發送前編碼全部字符（不設置默認）
multipart/form-data：不對字符編碼，在使用包含文件上傳控件的表單時，必須使用該值。
text/plain：空格轉換爲 "+" 加號，但不對特殊字符編碼。

上面的文字看起來可能不夠直觀，因此能夠本身發送請求來查看：css

//前臺頁面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);
複製代碼

將login.html的form表單的enctype屬性分別改爲text/plain、application/x-www-form-urlencoded、multipart/form-data：

text/plain的請求體：空格轉換爲 "+" 加號，但不對特殊字符編碼
application/x-www-form-urlencoded的請求體：在發送前編碼全部字符（不設置默認）
multipart/form-data：不對字符編碼，在使用包含文件上傳控件的表單時，必須使用該值。

從上面的圖片能夠看出來：

通常的表單提交使用的application/x-www-form-urlencoded，比text/plain多了字符串進行編碼
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的原理

從上面的兩張圖能夠看到請求頭中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>]
複製代碼

截取了須要的內容以後就能夠作進一步的處理： html

內容中包含filename的獲取除綠色部分的內容
內容中不包含filename的組成ctx.request.fields.xx = xx

function betterBody({uploadDir}) {
    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 () {
          if (ctx.get('content-type').includes('multipart')) {
            let r = Buffer.concat(arr); //請求體中的內容
            
            //獲取的boundary少了--，加上後用於截取內容
            let boundary = '--' + ctx.get('content-type').split('=')[1];  
            
            // 去除頭尾取到中間有用的部分
            //[<Buffer 2a 2a>,<Buffer 2a 2a>,<Buffer 2a 2a>]
            let lines = r.split(boundary).slice(1, -1);
            
            let fileds = {};
            
            //處理含filename和不含filename的內容
            lines.forEach((line) => {
              let [head, content] = line.split('\r\n\r\n');
              head = head.toString();
              if (head.includes('filename')) {
                // 是文件取出除head+'\r\n\r\n'後的內容
                //-2表示去除最後空白行\r\n
                let content = line.slice(head.length + 4, -2);
                let uuid = require('uuid/v4');
                let fs = require('fs');
                let p = uuid();
                fs.writeFileSync(path.resolve(__dirname, uploadDir, p), content);
                fileds['path'] = p;
              } else {
                // 不是文件，掛載參數例如：username
                let key = head.match(/name="([\s\S]*)"/im)[1];
                //-2表示去除最後空白行\r\n
                let value = content.toString().slice(0, -2);
                fileds[key] = value;
              };
            })
            ctx.request.fields = fileds;
            resolve();
          }
        })
      })
      await next()
    }
}
複製代碼

結語

koa框架會用也會寫系列的內容基本就介紹完了，歡迎你們指正！node

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。