Koa - 使用koa-multer上傳文件（上傳限制、錯誤處理）

時間 2019-11-16

標籤 koa 使用 multer 上傳文件限制錯誤處理简体版

原文原文鏈接

前言

上傳文件在開發中是很常見的操做，今天我選擇使用koa-multer中間件來實現這一功能，除了上傳文件外，我還會對文件上傳進行限制，以及發生上傳錯誤時的處理。css

因爲原來的 koa-multer 已經中止維護，咱們要使用最新的 @koa/multer 。這個模塊是 koa-multer 的一個分支，它被分叉到官方的Koa組織中，並以@koa/multer包名提供。html

@koa/multer 依賴於 multer，安裝時要將 multer 一併安裝上，安裝命令以下前端

npm install --save @koa/multer multernode

上傳文件

前端代碼：jquery

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="file" id="file" accept="image/*"/>
    <button id="submit">提交</button>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script> $(function(){ $('#submit').click(()=>{ let file = $('#file')[0].files[0] let formData = new FormData() formData.set('file',file) formData.set('name',file.name) formData.set('timestamp',Date.now()) $.ajax({ url:'http://localhost:3000/user/file', type:'post', data: formData, cache: false, contentType: false, processData:false, success(res){ console.log(res) } }) }) }) </script>
</html>

node代碼：git

const Koa = require('koa') const Router = require('koa-router') const route = new Router() const multer = require('@koa/multer') const path = require('path') //上傳文件存放路徑、及文件命名
const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, path.join(__dirname ,'/public')) }, filename: function (req, file, cb) { let type = file.originalname.split('.')[1] cb(null, `${file.fieldname}-${Date.now().toString(16)}.${type}`) } }) //文件上傳限制
const limits = { fields: 10,//非文件字段的數量
    fileSize: 500 * 1024,//文件大小 單位 b
    files: 1//文件數量
} const upload = multer({storage,limits}) route.post('/user/file', upload.single('file'), async (ctx,next)=>{ ctx.body = { code: 1, data: ctx.file } }) app.use(router.routes()).use(router.allowedMethods()) app.listen(3000)

上面的代碼作了哪些事情：github

1. 存放上傳文件的文件夾須要已經存在的，這裏我建立的是public文件夾用於保存文件ajax

2. 上傳的文件默認沒有後綴名，須要手動加上後綴名；爲了命名不重複，我使用時間戳轉爲16進製做爲文件命名express

3. 對文件上傳作限制處理，指定限制能夠幫助保護您的站點免受拒絕服務(DoS)攻擊。npm

4. 在上傳文件的路由上使用中間件，因爲我這裏只上傳一個文件，因此使用 single 方法，single方法接受一個字符串，這個字符串爲上傳文件的字段名，另外上傳多文件能夠使用 array、fileds

5. 在路由中，可經過 ctx.file 獲取上傳完畢的文件信息，多文件上傳可經過 ctx.files 獲取

上傳成功後能夠在文件夾下，看到上傳的文件

更多配置和方法的使用，請參考：https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md

上傳錯誤處理

假如前端上傳文件的字段和後端配置的字段不一致時，會致使報錯，node.js直接奔潰。爲了處理一些上傳文件時發生的意外錯誤，咱們須要作出一些錯誤處理。

@koa/multer 是基於 multer 封裝的 koa 版，因此 multer 的錯誤處理在 koa 中不適用，multer 錯誤處理的文檔描述：

我也嘗試過使用這種方法，確實沒法捕獲錯誤。

在通過網上搜索和官方文檔中都沒發現有相似的錯誤處理方法，後來只能經過看 @koa/multer 源碼來找到一些解決的思路。

能夠看到 @koa/multer 對 multer 封裝的代碼大概60行左右，如下是封裝的代碼：

const originalMulter = require('multer'); function multer(options) { const m = originalMulter(options); makePromise(m, 'any'); makePromise(m, 'array'); makePromise(m, 'fields'); makePromise(m, 'none'); makePromise(m, 'single'); return m; } function makePromise(multer, name) { if (!multer[name]) return; const fn = multer[name]; multer[name] = function() { const middleware = fn.apply(this, arguments); return (ctx, next) => { return new Promise((resolve, reject) => { middleware(ctx.req, ctx.res, err => { if (err) return reject(err); if ('request' in ctx) { if (ctx.req.body) { ctx.request.body = ctx.req.body; delete ctx.req.body; } if (ctx.req.file) { ctx.request.file = ctx.req.file; ctx.file = ctx.req.file; delete ctx.req.file; } if (ctx.req.files) { ctx.request.files = ctx.req.files; ctx.files = ctx.req.files; delete ctx.req.files; } } resolve(ctx); }); }).then(next); }; }; } multer.diskStorage = originalMulter.diskStorage; multer.memoryStorage = originalMulter.memoryStorage; module.exports = multer;

由於koa語法是使用 async/await，封裝就是把原來使用回調的方式改成使用Promise，而後我看到一段代碼，讓我找到點頭緒。

這段封裝的錯誤處理是否是很像原來版本的錯誤處理，當發生錯誤被 reject 出去，那麼我是否是能夠經過 catch 來對錯誤進行捕獲？通過幾回嘗試後，終於成功捕獲錯誤。將路由代碼改成如下形式：

route.post('/user/file', async (ctx,next)=>{ let err = await upload.single('file')(ctx, next) .then(res=>res) .catch(err=>err) if(err){ ctx.body = { code:0, msg : err.message } }else{ ctx.body = { code:1, data:ctx.file } } })