在Koa.js中實現文件上傳的接口

文件上傳是一個基本的功能，每一個系統幾乎都會有，好比上傳圖片、上傳Excel等。那麼在Node Koa應用中如何實現一個支持文件上傳的接口呢？本文從環境準備開始、最後分別用 Postman 和一個HTML頁面來測試。

環境準備

首先固然是要初始化一個Koa項目了，安裝 Koa、koa-router 便可。

npm install koa koa-router

設置圖片上傳目錄，把圖片上傳到指定的目錄中，在 app 路徑下新建 public 文件夾，目錄結構以下：

koa-upload/
--app
----public
------uploads
----index.js
--package.json

編寫 index.js

const koa = require('koa')
const app = new koa()

router.post('/upload', ctx => {
    ctx.body = 'koa upload demo'
})
app.use(router.routes());

app.listen(3000, () => {
    console.log('啓動成功')
    console.log('http://localhost:3000')
});

而後啓動，確保這一步沒有問題。

使用 koa-body 中間件獲取上傳的文件

koa-body 支持文件、json、form格式的請求體，安裝 koa-body

npm install koa-body

設置 koaBody 配置參數，index.js

const koa = require('koa')
const koaBody = require('koa-body')
const path = require('path')
const app = new koa()

app.use(koaBody({
    // 支持文件格式
    multipart: true,
    formidable: {
        // 上傳目錄
        uploadDir: path.join(__dirname, 'public/uploads'),
        // 保留文件擴展名
        keepExtensions: true,
    }
}));
... ...

接下來完善 /upload 路由，獲取文件，而後直接返回文件路徑

router.post('/upload', ctx => {
    const file = ctx.request.files.file
    ctx.body = { path: file.path }
})

這樣咱們其實已經能夠進行文件上傳，並把文件上傳到 public/uploads 中了，咱們用 Postman 來測試一下。

使用 Postman 測試

打開 Postman，輸入 http://localhost:3001/upload，選擇 POST 方法，而且選擇文件用 Body 來傳輸，而且選擇 form-data 格式，而後在 KEY 中選擇 file類型。

而後就能夠選擇圖片進行上傳了,上傳成功後就能夠看到 uploads 文件夾下有利一個圖片了，而且輸出量圖片的路徑。

使用 koa-static 中間件生成圖片連接

直接返回圖片的本地路徑在其實是沒什麼用的，咱們應該返回一個http連接的圖片地址，點擊地址就能夠查看圖片。

藉助 koa-static 中間件能夠幫助咱們生成一個靜態服務，它指定一個文件夾，文件夾下全部的文件均可以經過 http服務來訪問。

安裝：npm install koa-static 並註冊到 app 上，咱們把他註冊在 koaBody 中間件的前面，把 public 設置爲靜態文件目錄。

const koaStatic = require('koa-static')
... ...
app.use(koaStatic(path.join(__dirname, 'public')))

啓動程序，這樣 public 下的文件就可使用HTTP服務來大開了，咱們能夠打開以前上傳的圖片：http://localhost:3001/uploads/upload_65c1d26e5a47870cf4011aad1243fce0.png，能夠在瀏覽器中直接顯示了。

而後咱們改造一下 upload 路由的實現，讓它生成圖片連接返回給客戶端

router.post('/upload', ctx => {
    const file = ctx.request.files.file
    const basename = path.basename(file.path)
    ctx.body = { "url": `${ctx.origin}/uploads/${basename}` }
})

basename 能夠拿到文件的文件名和擴展名，ctx.origin 拿到服務器的域名，即諸如 localhost:3001，但咱們不能寫死。

再用 Postman 測試一下，便可看到返回的 圖片URL了，點擊能夠直接打開。

編寫前端頁面上傳文件

前面咱們用 Postman 模擬了上傳文件進行測試，雖然能夠高效的測試咱們編寫的後端接口，可是咱們前端有些同窗可能一般更熟悉前端頁面的方式測試，那麼咱們來寫一個表單頁面來測試。

在 public 中新建 upload.html 文件做爲測試頁面。

<form action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="file">
    <button type="submit">上傳</button>
</form>

這是傳統的表單提交，咱們實際工做中這樣的代碼可能已經不常見了，action 就是咱們的提交到的接口，enctype="multipart/form-data" 就是指定上傳文件格式。input 的 name 屬性必定要等於file，由於咱們接受的字段名是 file。

而後咱們用HTTP服務打開這個頁面：http://localhost:3001/upload.html，由於咱們整個 public 目錄已是一個靜態HTTP服務目錄了，裏面的全部文件均可以經過HTTP訪問。

選擇文件，點擊上傳，上傳成功後能夠看到返回了文件地址

完！

---

完整源碼：https://github.com/dunizb/CodeTest/tree/master/Node-Koa/upload-demo

---

若是喜歡個人博客，若是對你剛好有所幫助，能夠打賞1塊錢鼓勵我哈。還能夠關注個人微信公衆號號（作工程師不作碼農），第一時間接受博客推送，也能夠RSS訂閱個人博客：https://blog.dunizb.com