koa图片上传

发布于 2019-12-25  约 5 分钟
本文用图片上传展示koa中间件框架基本流程,省去前端编码直接用 httpie 模拟文件上传测试

Koa

Koa 的中间件之间按照编码顺序在栈内依次执行(先进后出),允许您执行操作并向下传递请求(downstream),之后过滤并逆序返回响应(upstream)。前端人员可以将 next() 之前的任意代码视为“捕获”阶段,下面这个 gif 说明了 async 函数如何恰当地利用堆栈流来实现请求和响应流。

koa 图片上传详解

当中间件(带有签名 (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 命令上传本地图片到服务器

koa 图片上传详解
服务端显示

  <-- POST /
uploading pipe.png -> public\images\pipe.png
  --> POST / 302 73ms 63b

查看服务器图片目录,与此同时前端可以通过localhost:3000/images/pipe.png url地址直接访问图片

koa 图片上传详解

阅读 781发布于 2019-12-25

推荐阅读
目录