2019-12-08 10:16:21 qq_24724109 阅读数 20
  • 微信小程序框架mpvue实战:图书商城

    本项目使用的框架是美团团队推出的小程序框架Mpvue,项目为模块化、组件化、工程化的项目。涵盖了原生小程序API的使用、Vue.js核心语法及flyio第三方Ajax请求库,后端使用Koa框架进行搭建。学习本课程内容可以快速上手Mpvue,熟悉小程序同后端交互,及同微信官方的交互流程。

    8 人正在学习 去看看 张长志

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

参考

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. 结果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2019-12-16 14:09:21 gwdgwd123 阅读数 15
  • 微信小程序框架mpvue实战:图书商城

    本项目使用的框架是美团团队推出的小程序框架Mpvue,项目为模块化、组件化、工程化的项目。涵盖了原生小程序API的使用、Vue.js核心语法及flyio第三方Ajax请求库,后端使用Koa框架进行搭建。学习本课程内容可以快速上手Mpvue,熟悉小程序同后端交互,及同微信官方的交互流程。

    8 人正在学习 去看看 张长志

 

koa2 使用 koa-body 代替 koa-bodyparser 和 koa-multer

评论:7 · 阅读:22543· 喜欢:7

 

 

一、需求

之前使用 koa2 的时候,处理 post 请求使用的是 koa-bodyparser,同时如果是图片上传使用的是 koa-multer

这两者的组合没什么问题,不过 koa-multer 和 koa-route(注意不是 koa-router) 存在不兼容的问题。

这个问题已经在这篇文章中说明了:

关于 koa-bodyparser 的使用,见下面文章:

但是这两者可以通过 koa-body 代替,并且只是用 koa-body 即可。

koa-body 主要是下面两个依赖:

"co-body": "^5.1.1",
"formidable": "^1.1.1"

具体的实现可以在 github 上查看 : https://github.com/dlau/koa-body

二、koa-body 的基本使用

在 koa2 中使用 koa-body,我使用的是全局引入,而不是路由级别的引入,因为考虑到很多地方都有 post 请求或者是文件上传请求,没必要只在路由级别引入。

1、安装依赖

yarn add koa-body
## npm i koa-body -S

2、app.js

省略了 koa 的一些基本代码

const koaBody = require('koa-body');
const app = new koa();
app.use(koaBody({
  multipart:true, // 支持文件上传
  encoding:'gzip',
  formidable:{
    uploadDir:path.join(__dirname,'public/upload/'), // 设置文件上传目录
    keepExtensions: true,    // 保持文件的后缀
    maxFieldsSize:2 * 1024 * 1024, // 文件上传大小
    onFileBegin:(name,file) => { // 文件上传前的设置
      // console.log(`name: ${name}`);
      // console.log(file);
    },
  }
}));

3、有用的参数

1)koa-body 的基本参数

参数名 描述 类型 默认值
patchNode 将请求体打到原生 node.js 的ctx.req Boolean false
patchKoa 将请求体打到 koa 的 ctx.request 中 Boolean true
jsonLimit JSON 数据体的大小限制 String / Integer 1mb
formLimit 限制表单请求体的大小 String / Integer 56kb
textLimit 限制 text body 的大小 String / Integer 56kb
encoding 表单的默认编码 String utf-8
multipart 是否支持 multipart-formdate 的表单 Boolean false
urlencoded 是否支持 urlencoded 的表单 Boolean true
text 是否解析 text/plain 的表单 Boolean true
json 是否解析 json 请求体 Boolean true
jsonStrict 是否使用 json 严格模式,true 会只处理数组和对象 Boolean true
formidable 配置更多的关于 multipart 的选项 Object {}
onError 错误处理 Function function(){}
stict 严格模式,启用后不会解析  GET, HEAD, DELETE  请求 Boolean true

2)formidable 的相关配置参数

参数名 描述 类型 默认值
maxFields 限制字段的数量 Integer 1000
maxFieldsSize 限制字段的最大大小 Integer 2 * 1024 * 1024
uploadDir 文件上传的文件夹 String os.tmpDir()
keepExtensions 保留原来的文件后缀 Boolean false
hash 如果要计算文件的 hash,则可以选择 md5/sha1 String false
multipart 是否支持多文件上传 Boolean true
onFileBegin 文件上传前的一些设置操作 Function function(name,file){}

关于 onFileBegin 的更多信息可以查看:

4、获取文件上传后的信息

这些代码是在路由中体现的

需要注意的是,如果是获取上传后文件的信息,则需要在 ctx.request.files 中获取。

如果是获取其他的表单字段,则需要在 ctx.request.body 中获取,这是由 co-body 决定的(默认情况)。

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

router.post('/',async (ctx)=>{
  console.log(ctx.request.files);
  console.log(ctx.request.body);
  ctx.body = JSON.stringify(ctx.request.files);
});

三、结果

TIM截图20180620192404.jpg

因为默认开启多个文件上传,因此 ctx.request.files 是一个对象,

而且是通过表单的 name=photo 属性作为对象的 key,值便是一个 File 对象,有用的字段如下:

字段名 描述
size 文件大小
path 文件上传后的目录
name 文件的原始名称
type 文件类型
lastModifiedDate 上次更新的时间

 

http://www.ptbird.cn/koa-body.html

2019-11-26 15:05:08 godsor 阅读数 8
  • 微信小程序框架mpvue实战:图书商城

    本项目使用的框架是美团团队推出的小程序框架Mpvue,项目为模块化、组件化、工程化的项目。涵盖了原生小程序API的使用、Vue.js核心语法及flyio第三方Ajax请求库,后端使用Koa框架进行搭建。学习本课程内容可以快速上手Mpvue,熟悉小程序同后端交互,及同微信官方的交互流程。

    8 人正在学习 去看看 张长志

  1,下载koa-body包

        npm install koa-body --save        官方API:https://cnpmjs.org/package/koa-body

  2,在项目中引入koa-body中间件

    // koaBody配置
    const koaBody = require('koa-body');
    app.use(koaBody({
      multipart: true, // 是否可以多选
      formidable: {
        maxFileSize: 200*1024*1024    // 设置上传文件大小最大限制,默认2M
      }
    }));

  3,获取上传的文件和保存

     1)上传单个文件:

    // 上传单个文件
    router.post('/fileUpload', async (ctx,next) => {
      // 获取上传文件
      // 新版本的koa-body通过ctx.request.files获取上传的文件
      // 旧版本的koa-body通过ctx.request.body.files获取上传的文件
      const file = ctx.request.files.file;
      // 创建可读流
      const reader = fs.createReadStream(file.path);
      let filePath = path.join(__dirname, '/upload/') + `/${file.name}`;
      // 创建可写流
      const upStream = fs.createWriteStream(filePath);
      // 可读流通过管道写入可写流
      reader.pipe(upStream);
      return ctx.body = "上传成功!";
    })

     2)上传多个文件:

    // 上传多个文件
    router.post('/uploadfiles', async (ctx, next) => {
      // 获取上传文件
      // 新版本的koa-body通过ctx.request.files获取上传的文件
      // 旧版本的koa-body通过ctx.request.body.files获取上传的文件
      const files = ctx.request.files.file; // 获取上传文件
      for (let file of files) {
        // 创建可读流
        const reader = fs.createReadStream(file.path);
        // 获取上传文件扩展名
        let filePath = path.join(__dirname, '/upload/') + `/${file.name}`;
        // 创建可写流
        const upStream = fs.createWriteStream(filePath);
        // 可读流通过管道写入可写流
        reader.pipe(upStream);
      }
      return ctx.body = "上传成功!";
    });

   4,完整代码:

const Koa = require('koa');
const app = new Koa();
const fs = require('fs');
const path = require('path');

// 注意require('koa-router')返回的是函数:
const router = require('koa-router')();
const bodyParser = require('koa-bodyparser');

// koaBody配置
const koaBody = require('koa-body');
app.use(koaBody({
  multipart: true, // 是否可以多选
  formidable: {
    maxFileSize: 200*1024*1024    // 设置上传文件大小最大限制,默认2M
  }
}));

// 上传文件页面
router.get('/file', async (ctx,next) => {
  ctx.response.body =
    `<h1>表单提交:</h1>
     <form action="/fileUpload" method="post" enctype="multipart/form-data">
        <input type="file" name="file" id="file" value="" multiple="multiple" />
        <input type="submit" value="提交"/>
     </form>`;
  await next();
})

// 上传单个文件
router.post('/fileUpload', async (ctx,next) => {
  // 获取上传文件
  // 新版本的koa-body通过ctx.request.files获取上传的文件
  // 旧版本的koa-body通过ctx.request.body.files获取上传的文件
  const file = ctx.request.files.file;
  // 创建可读流
  const reader = fs.createReadStream(file.path);
  let filePath = path.join(__dirname, '/upload/') + `/${file.name}`;
  // 创建可写流
  const upStream = fs.createWriteStream(filePath);
  // 可读流通过管道写入可写流
  reader.pipe(upStream);
  return ctx.body = "上传成功!";
})

// 上传多个文件
router.post('/uploadfiles', async (ctx, next) => {
  // 获取上传文件
  // 新版本的koa-body通过ctx.request.files获取上传的文件
  // 旧版本的koa-body通过ctx.request.body.files获取上传的文件
  const files = ctx.request.files.file; // 获取上传文件
  for (let file of files) {
    // 创建可读流
    const reader = fs.createReadStream(file.path);
    // 获取上传文件扩展名
    let filePath = path.join(__dirname, '/upload/') + `/${file.name}`;
    // 创建可写流
    const upStream = fs.createWriteStream(filePath);
    // 可读流通过管道写入可写流
    reader.pipe(upStream);
  }
  return ctx.body = "上传成功!";
});

// pots请求,参数解析插件
app.use(bodyParser());
// 引入路由插件
app.use(router.routes());

app.listen(3000);
console.log('app started at port 3000...');

  参考链接:https://www.jianshu.com/p/34d0e1a5ac70

2019-01-10 14:33:36 baidu_41601048 阅读数 4341
  • 微信小程序框架mpvue实战:图书商城

    本项目使用的框架是美团团队推出的小程序框架Mpvue,项目为模块化、组件化、工程化的项目。涵盖了原生小程序API的使用、Vue.js核心语法及flyio第三方Ajax请求库,后端使用Koa框架进行搭建。学习本课程内容可以快速上手Mpvue,熟悉小程序同后端交互,及同微信官方的交互流程。

    8 人正在学习 去看看 张长志

koa-body是一款为实现文件上传的中间件。

本文主要就利用该插件实现上传时遇到的问题进行些整理。

1 ctx.request.files.file  ---------->终端提示undefined问题.

主要原因在于koa-body版本问题。koa-body v3和v4之前通过ctx.request.body捕获文件。而v3.v4终才是通过ctx.request.files.file进行获取。所以在安装过程中要指定版本。

正解:

cnpm install koa-body@4/cnpm install koa-body@3

默认cnpm install koa-body安装依然是v3之前的版本

2 关于中间件顺序问题。

   在路由中间件和koa-body都存在的情况下,务必让koa-body在koa-router之前。否则会报错。

demo结构

 ----node_moudules

----static   //存放静态资源文件夹

       form.html   表单html页面

-----test.js  //服务器测试文件

代码展示:

---------------------------------test.js----------------------------------------

var koa=require("koa");

var fs=require("fs");

var path=require("path");

var router=require("koa-router")();

var static=require("koa-static");

var bodyParser=require("koa-bodyparser");

var koaBody=require("koa-body")

var fs=require("fs")

var app=new koa();

const uploadUrl="http://hocalhost:8989/static/upload";

 

//配置中间件,注意顺序

app.use(bodyParser());

app.use(koaBody({

multipart:true,

formidable:{

    maxFieldsSize:10*1024*1024,

    multipart:true

}

}))

app.use(router.routes())

app.use(router.allowedMethods())

app.use(static(__dirname+"/static"))

//配置路由

router.get("/",async(ctx)=>{

     ctx.response.type = 'html';  //注意设置文件头很重要。如果不设置,打开首页会进入下载

    ctx.response.body=fs.createReadStream(__dirname+'/static/form.html');

})

router.post("/upload", async (ctx)=>{

const file=ctx.request.files.file;

const reader=fs.createReadStream(file.path);

let filePath=__dirname+"/static/upload/";

let fileResource=filePath+`/${file.name}`;

if(!fs.existsSync(filePath)){  //判断staic/upload文件夹是否存在,如果不存在就新建一个

fs.mkdir(filePath,(err)=>{

if(err){

throw new Error(err)

}else{

let upstream=fs.createWriteStream(fileResource);

reader.pipe(upstream);

ctx.response.body={

url:uploadUrl+`/${file.name}`

}

}

})

}else{

let upstream=fs.createWriteStream(fileResource)

reader.pipe(upstream);

ctx.response.body={

      url:uploadUrl+`/${file.name}` //返给前端一个url地址

}

}

})

app.listen(8989)

-----------------------------------------form.html---------------------------------------------------

前端代码://注意控件需要设置name属性

<form action="http://localhost:8989/upload" method="post" enctype="multipart/form-data" id="fm">

     <p><input type="password" name="password" password=""/></p> -->

     <p><input type="file" name="file" id="file"></p>

     <p><input type="submit" value="提交"/></p>

</form>

前端也可以采用无刷新方式进行网络请求的方式。html结构只需要一个file文件域即可,但是我们需要通过axios或者fetch等方式进行网络请求

<body>

<input type="file" name="file" id="file">

</body>

<script>

var fileObj=document.getElementById("file");

fileObj.onchange=function(e){

var file=e.target.files[0];

var fd=new FormData();

fd.append("file",file);

 

fetch("http://localhost:9999/upload",{

method:"POST",

body:fd,

// headers:{   //注意:这里无需设置headers属性。浏览器会自动设置

// "Content-Type": "multipart/form-data"

// },

}).then(res=>{

return res.json()

}).then(data=>{

console.log("data:",data)

}).catch(err=>{

console.log("err:",err)

})

}

</script>

 

 

2019-07-11 19:36:43 qq_41742092 阅读数 580
  • 微信小程序框架mpvue实战:图书商城

    本项目使用的框架是美团团队推出的小程序框架Mpvue,项目为模块化、组件化、工程化的项目。涵盖了原生小程序API的使用、Vue.js核心语法及flyio第三方Ajax请求库,后端使用Koa框架进行搭建。学习本课程内容可以快速上手Mpvue,熟悉小程序同后端交互,及同微信官方的交互流程。

    8 人正在学习 去看看 张长志

1.首先安装该中间件

Npm install koa-body –save

Save 的意思是指在该目录下安装模块
2.引入模块 var body = require(‘koa-body’);
3.配置中间件 app.use(body({
Multipart:true, //这里补充一点,如果不加multipart:true ctx.request.body会获取不到值
Formidable:{

maxFileSize:20010241024}
}))
App.js 中的就配置完毕了,剩下的我们去到路由
4.在接收post请求中先获取请求的文件通过前端的name
Const file = ctx.request.files.file1 //我这里的file1是我前端的name值
Const reader = fs.createReadStream(file.path) //这里要引入文件操作模块跳到index.js最上面,也就是本文件的头部,加上 const fs = require(‘fs’)
通过英语意思可以知道这是创建可读取流,简单理解就是选取一个路径的文件让它可以被读取(可以引出的),这时文件早就已经被上传到了tmp/目录下,也就是我们的临时文件目录
我们继续创建一个路径,这时候要用到path模块,一样在文件的头部引用var path = require(‘path’);至于他是干什么的自行百度,继续,我们创建一个我们想要的路径来存放我们上传的文件(其实是将他从tmp目录下复制到这里,这里再提一下tmp目录中的临时文件是不会自行删除的,所以要定期删除),
Let filePath = path.join(__dirname,’…/upload’) + /${file.name};这句话的意思是创建一个文件,将一会我们要用的可写流写到这个这个目录的这个文件,后面那个是被特定的符号包裹着的变量,也就是我们文件的真正名字,__dirname是我们的目录目录的最前缀,目录最前面的东西,就是这个我们这个文件目录层级以上的目录前缀,
我们继续创建一个可写流顾名思义,可以被写入的流,const upstream = fs.createWriteStream(filepath)意思是这个目录的该文件可以被写入。
最后通过管道将可读流写入可写流
Reader.pipe(upstream);
这里是完整代码

router.post('/file',async (ctx) => {
	
	 // 上传单个文件 
	 const file = ctx.request.files.file1; 
	 console.log(file)
	 // 获取上传文件 
	 // 创建可读流 
	 const reader = fs.createReadStream(file.path); 
	 let filePath = path.join(__dirname, '../upload') + `/${file.name}`; 
	 // 创建可写流 
	 const upStream = fs.createWriteStream(filePath); 
	 // 可读流通过管道写入可写流 
	 reader.pipe(upStream); 
	 return ctx.body = "上传成功";

})

koa-body

阅读数 521

koa-body v3+有破坏性改变

博文 来自: web_longboss

Koa2入门

阅读数 385

koa2设置头

阅读数 39

没有更多推荐了,返回首页