koa 圖片上傳詳解

本文用圖片上傳展示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地址直接訪問圖片