線上直播系統原始碼，Node.js中使用Koa實現上傳圖片功能

線上直播系統原始碼，Node.js中使用Koa實現上傳圖片功能

1、安裝koa-body，以實現上傳圖片功能

npm i koa-body@4.1.0

注：如果之前安裝了koa-bodyparser，還需要先解除安裝koa-bodyparser，並把所有koa-bodyparser替換成koa-body

npm uninstall koa-bodyparser

2、安裝koa-static，以實現靜態資源託管，透過配置靜態資源中介軟體，從而生成圖片連結

npm i koa-static@5.0.0

3、程式碼示例

圖片上傳到 /public/uploads 資料夾中。

後端程式碼示例：index.js

const Koa = require('koa')
const app = new Koa()
const Router = require('koa-router')
const router = new Router() 
 
const path = require('path')
// 1、引入koa-body實現上傳圖片功能
const koabody = require('koa-body')
app.use(koabody({
    multipart: true, //支援圖片檔案
    formidable: {
        uploadDir: path.join(__dirname, '/public/uploads'), //設定上傳目錄
        keepExtensions: true, //保留擴充名
    }
}))
 
// 2、引入koa-static實現生成圖片連結
const koaStatic=require('koa-static')
app.use(koaStatic(path.join(__dirname, 'public')))
// 在瀏覽器使用可以訪問圖片
// app.use(koaStatic(path.join(__dirname, 'static'))) // 可以配置多個靜態資源中介軟體
 
// 掛載路由
router.get('/upload', (ctx) => { // 上傳圖片
    const file = ctx.request.files.file   //ctx.request.files.file中的file需要與前端使用的名稱保持一致
    const basename = path.basename(file.path) //傳入絕對路徑返回的basename為檔名稱+擴充名
    ctx.body = {
         url:`${ctx.origin}/uploads/${basename}` //ctx.origin為
   }
})
 
// 註冊路由中介軟體
app.use(router.routes())
 
app.listen(3000)

 前端程式碼示例：/public/uploadpic.html

<form action="/upload" enctype="multipart/form-data" method="post">
    <input type="file" name="file" accept="image/png image/jpg">
    <button type="submit">上傳圖片</button>
</form>

以上就是線上直播系統原始碼，Node.js中使用Koa實現上傳圖片功能， 更多內容歡迎關注之後的文章