koa 图片上传详解

最新推荐文章于 2024-12-18 15:47:42 发布

原创最新推荐文章于 2024-12-18 15:47:42 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#中间件 #http #koa #upload

javascript 同时被 2 个专栏收录

66 篇文章

订阅专栏

nodejs

23 篇文章

订阅专栏

本文详细介绍使用Koa中间件框架进行图片上传的过程，包括设置静态资源服务、配置文件上传中间件、处理上传图片及展示图片。通过示例代码演示如何在服务器端接收并存储图片，同时提供前端访问路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文图片上传示例展示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 图片上传详解