文件上傳是一個基本的功能,每個系統幾乎都會有,比如上傳圖片、上傳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