本文图片上传示例展示koa中间件框架基本流程,省去前端编码直接用
httpie
模拟文件上传测试
Koa
Koa 的中间件之间按照编码顺序在栈内依次执行(先进后出),允许您执行操作并向下传递请求(downstream),之后过滤并逆序返回响应(upstream)。前端人员可以将next()
之前的任意代码视为“捕获”阶段,下面这个 gif 说明了 async 函数如何恰当地利用堆栈流来实现请求和响应流。
当中间件(带有签名 (ctx, next) 的MiddlewareFunction)运行时,它必须手动调用 next() 来运行 “下游” 中间件。
Code
图片上传,需要指定上传路径(步骤5),web访问展示图片则要开启静态资源服务(步骤1)
const logger = require("koa-logger")
const serve = require("koa-static")
const koaBody = require("koa-body")
const Koa = require('koa')
const fs = require("fs")
const app = new Koa()
const os = require("os")
const path = require("path")
app.use(logger())
// 使用文件上传中间件
app.use(koaBody({ multipart: true }))
// 1.静态资源服务,指定对外提供访问的根目录
app.use(serve(path.join(__dirname, '/public')));
app.use(async function (ctx, next) {
await next()
if (ctx.body || !ctx.idempotent) return
ctx.response.body = '<h1>Hello, koa2!</h1><p>not upload photo</p>'
})
// 2. 文件上传
app.use(async function (ctx, next) {
if ('POST' != ctx.method) return await next()
// 获取图片源
// <input type="file" name="file" multiple>
const file = ctx.request.files.file
// 接收读出流
const reader = fs.createReadStream(file.path)
// 创建写入流
// 3. 指定图片路径文件名(即上传图片存储目录)
const stream = fs.createWriteStream(path.join('public/images', file.name))
// 用管道将读出流 "倒给" 输入流
reader.pipe(stream)
// 4.打印上传文件在服器上存储的相对路径
console.log('uploading %s -> %s', file.name, stream.path)
// 5.重定向到基于根目录下的静态资源web访问路径,展示图片
ctx.redirect(stream.path.substr(6).replace(/\\/g,'/'))
})
// 监听
app.listen(3000, () => {
console.log("listening port 3000");
})
Upload
项目基本结构
└─node_modules
├─public
└─images
└─app.js
执行node app.js
启动服务器
listening port 3000
执行httpie 命令上传本地图片到服务器
服务端显示
<-- POST /
uploading pipe.png -> public\images\pipe.png
--> POST / 302 73ms 63b
查看服务器图片目录,与此同时前端可以通过localhost:3000/images/pipe.png
url地址直接访问图片