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

01—環(huán)境準備

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

npm install koa koa-router

設置圖片上傳目錄，把圖片上傳到指定的目錄中，在 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('啟動成功')
  console.log('http://localhost:3000')
});

然后啟動，確保這一步?jīng)]有問題。

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

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

  npm install koa-body

設置 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'),
    // 保留文件擴展名
    keepExtensions: true,
  }
}));

... ...

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

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

這樣我們其實已經(jīng)可以進行文件上傳，并把文件上傳到 public/uploads 中了，我們用 Postman 來測試一下。

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

然后就可以選擇圖片進行上傳了,上傳成功后就可以看到 uploads 文件夾下有一個圖片了，并且輸出了圖片的路徑。

03—使用 koa-static 中間件生成圖片鏈接

直接返回圖片的本地路徑在實際上是沒什么用的，我們應該返回一個http鏈接的圖片地址，點擊地址就可以查看圖片。

借助 koa-static 中間件可以幫助我們生成一個靜態(tài)服務，它指定一個文件夾，文件夾下所有的文件都可以通過 http服務來訪問。

安裝： npm install koa-static 并注冊到 app 上，我們把他注冊在 koaBody 中間件的前面，把 public 設置為靜態(tài)文件目錄。

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

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

然后我們改造一下 upload 路由的實現(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 可以拿到文件的文件名和擴展名，ctx.origin 拿到服務器的域名，即諸如 localhost:3001，但我們不能寫死。

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

04—編寫前端頁面上傳文件

前面我們用 Postman 模擬了上傳文件進行測試，雖然可以高效的測試我們編寫的后端接口，但是我們前端有些同學可能通常更熟悉前端頁面的方式測試，那么我們來寫一個表單頁面來測試。

在 public 中新建 upload.html 文件作為測試頁面。

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

這是傳統(tǒng)的表單提交，我們實際工作中這樣的代碼可能已經(jīng)不常見了，action 就是我們的提交到的接口，enctype="multipart/form-data" 就是指定上傳文件格式。 input 的 name 屬性一定要等于file，因為我們接受的字段名是 file。

然后我們用HTTP服務打開這個頁面： http://localhost:3001/upload.html ，因為我們整個 public 目錄已經(jīng)是一個靜態(tài)HTTP服務目錄了，里面的所有文件都可以通過HTTP訪問。

選擇文件，點擊上傳，上傳成功后可以看到返回了文件地址

總結(jié)

以上所述是小編給大家介紹的在Koa.js中實現(xiàn)文件上傳的接口功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

最新評論