您好,登錄后才能下訂單哦!
文件上傳是一個(gè)基本的功能,每個(gè)系統(tǒng)幾乎都會(huì)有,比如上傳圖片、上傳Excel等。 那么在Node Koa應(yīng)用中如何實(shí)現(xiàn)一個(gè)支持文件上傳的接口呢? 本文從環(huán)境準(zhǔn)備開始、最后分別用 Postman 和一個(gè)HTML頁面來測試。
01—環(huán)境準(zhǔn)備
首先當(dāng)然是要初始化一個(gè)Koa項(xiàng)目了,安裝 Koa、koa-router 即可。
npm install koa koa-router
設(shè)置圖片上傳目錄,把圖片上傳到指定的目錄中,在 app 路徑下新建 public 文件夾,目錄結(jié)構(gòu)如下:
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('啟動(dòng)成功') console.log('http://localhost:3000') });
然后啟動(dòng),確保這一步?jīng)]有問題。
02—使用 koa-body 中間件獲取上傳的文件
koa-body 支持文件、json、form格式的請(qǐng)求體,安裝 koa-body
npm install koa-body
設(shè)置 koaBody 配置參數(shù),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'), // 保留文件擴(kuò)展名 keepExtensions: true, } }));
... ...
接下來完善 /upload 路由,獲取文件,然后直接返回文件路徑
router.post('/upload', ctx => { const file = ctx.request.files.file ctx.body = { path: file.path } })
這樣我們其實(shí)已經(jīng)可以進(jìn)行文件上傳,并把文件上傳到 public/uploads 中了,我們用 Postman 來測試一下。
打開 Postman,輸入 http://localhost:3001/upload ,選擇 POST 方法,并且選擇文件用 Body 來傳輸,并且選擇 form-data 格式,然后在 KEY 中選擇 file類型。
然后就可以選擇圖片進(jìn)行上傳了,上傳成功后就可以看到 uploads 文件夾下有一個(gè)圖片了,并且輸出了圖片的路徑。
03—使用 koa-static 中間件生成圖片鏈接
直接返回圖片的本地路徑在實(shí)際上是沒什么用的,我們應(yīng)該返回一個(gè)http鏈接的圖片地址,點(diǎn)擊地址就可以查看圖片。
借助 koa-static 中間件可以幫助我們生成一個(gè)靜態(tài)服務(wù),它指定一個(gè)文件夾,文件夾下所有的文件都可以通過 http服務(wù)來訪問。
安裝: npm install koa-static
并注冊(cè)到 app 上,我們把他注冊(cè)在 koaBody 中間件的前面,把 public 設(shè)置為靜態(tài)文件目錄。
const koaStatic = require('koa-static') ... ... app.use(koaStatic(path.join(__dirname, 'public')))
啟動(dòng)程序,這樣 public 下的文件就可以使用HTTP服務(wù)來打開了,我們可以打開之前上傳的圖片: http://localhost:3001/uploads/upload_65c1d26e5a47870cf4011aad1243fce0.png ,可以在瀏覽器中直接顯示了。
然后我們改造一下 upload 路由的實(shí)現(xiàn),讓它生成圖片鏈接返回給客戶端
router.post('/upload', ctx => { const file = ctx.request.files.file const basename = path.basename(file.path) ctx.body = { "url": `${ctx.origin}/uploads/${basename}` } })
basename 可以拿到文件的文件名和擴(kuò)展名,ctx.origin 拿到服務(wù)器的域名,即諸如 localhost:3001,但我們不能寫死。
再用 Postman 測試一下,即可看到返回的 圖片URL了,點(diǎn)擊可以直接打開。
04—編寫前端頁面上傳文件
前面我們用 Postman 模擬了上傳文件進(jìn)行測試,雖然可以高效的測試我們編寫的后端接口,但是我們前端有些同學(xué)可能通常更熟悉前端頁面的方式測試,那么我們來寫一個(gè)表單頁面來測試。
在 public 中新建 upload.html 文件作為測試頁面。
<form action="/upload" method="POST" enctype="multipart/form-data"> <input type="file" name="file"> <button type="submit">上傳</button> </form>
這是傳統(tǒng)的表單提交,我們實(shí)際工作中這樣的代碼可能已經(jīng)不常見了,action 就是我們的提交到的接口,enctype="multipart/form-data"
就是指定上傳文件格式。 input 的 name 屬性一定要等于file,因?yàn)槲覀兘邮艿淖侄蚊?file。
然后我們用HTTP服務(wù)打開這個(gè)頁面: http://localhost:3001/upload.html ,因?yàn)槲覀冋麄€(gè) public 目錄已經(jīng)是一個(gè)靜態(tài)HTTP服務(wù)目錄了,里面的所有文件都可以通過HTTP訪問。
選擇文件,點(diǎn)擊上傳,上傳成功后可以看到返回了文件地址
總結(jié)
以上所述是小編給大家介紹的在Koa.js中實(shí)現(xiàn)文件上傳的接口功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。