Koa学习笔记:koa-body处理表单数据

8. koa-boby模块

1. 前言

Koa-body模块

Koa2中利用Koa-body代替koa-bodyparser和koa-multer。原来通过koa-bodyparser来打包Post请求的数据,通过koa-multer来处理multipart的文件;使用koa-body后,ctx.request.files获得Post中的文件信息。ctx.request.body获得Post上传的表单信息。

安装koa-body

# koa-body安装
yarn add koa-body

参考

  • 一篇好的koa教程
  • koa-body文档

2. koa-body处理post例子

const Koa = require('koa');
const path = require('path');
const Router = require('koa-router');
const views = require('koa-views');
const koaBody = require('koa-body');
const fs = require('fs');

const app = new Koa();

const router = new Router();

app.use(views(path.resolve(__dirname, './views')), {
  extension: 'ejs'
});

// 先添加koaBody中间件
app.use(
  koaBody({
    // 如果需要上传文件,multipart: true
    // 不设置无法传递文件
    multipart: true,
    formidable: {
      maxFileSize: 1000 * 1024 * 1024
    },
    patchKoa: true
  })
);

router.get('/', async (ctx, next) => {
  ctx.body = 'index';
});

router.get('/index', async ctx => {
  await ctx.render('index.ejs');
});

router.post('/upload', async (ctx, next) => {
  const file = ctx.request.files.file;
  const formData = ctx.request.body;
  const extname = path.extname(file.name);
  // 本地文件服务器获取POST上传文件过程
  // 1. fs.createReadStream 创建可读流
  // 2. fs.createWriteStream 创建可写流
  // 3. reader.pipe(writer)
  const reader = fs.createReadStream(file.path);
  const writer = fs.createWriteStream(
    `static/${Math.random()
      .toString(36)
      .substr(2)}${extname}`
  );
  reader.pipe(writer);
  ctx.body = formData;
});

app.use(router.routes(), router.allowedMethods());

app.listen(3000, () => {
  console.log('server Port on 3000');
});

Notes:

createReadStream, createWriteStream和pipe,就相当与创建两个蓄水池,pipe相当于水泵将可读流水池中的水写到可写流的水池中,也就是将文件从远端写到本地

// index.ejs
<!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>
  </head>
  <body>
    <form action="/upload" method="POST" enctype="multipart/form-data">
      <p>file Upload</p>
      <span>姓名: </span><input type="text" name="name" /> <br />
      <span>年龄:</span><input type="text" name="age" /> <br />
      <span>选择提交文件:</span>
      <input type="file" name="file" /> <br />
      <button type="submit">提交</button>
    </form>
  </body>
</html>

3. 结果

Koa学习笔记:koa-body处理表单数据_第1张图片
Koa学习笔记:koa-body处理表单数据_第2张图片
Koa学习笔记:koa-body处理表单数据_第3张图片

你可能感兴趣的:(Koa笔记,koa-body,koa,处理POST)