关闭

Koa使用koa-multer上传文件(上传限制、错误处理)

时间: 2019-08-03阅读: 1451标签: koa

前言

上传文件在开发中是很常见的操作,今天我选择使用koa-multer中间件来实现这一功能,除了上传文件外,我还会对文件上传进行限制,以及发生上传错误时的处理。由于原来的 koa-multer 已经停止维护,我们要使用最新的 @koa/multer 。这个模块是 koa-multer 的一个分支,它被分叉到官方的Koa组织中,并以@koa/multer包名提供。

@koa/multer 依赖于 multer,安装时要将 multer 一并安装上,安装命令如下

npm install --save @koa/multer multer

 

上传文件

前端代码

<!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代码:

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)

上面的代码做了哪些事情:

1. 存放上传文件的文件夹需要已经存在的,这里我创建的是public文件夹用于保存文件

2. 上传的文件默认没有后缀名,需要手动加上后缀名;为了命名不重复,我使用时间戳转为16进制作为文件命名

3. 对文件上传做限制处理,指定限制可以帮助保护您的站点免受拒绝服务(DoS)攻击。

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
        }
    }
})

我做了哪些改变:

1. 将使用中间件的方式改成手动方法调用,single方法返回的是一个函数,这个函数对应的就是上面截图的函数,所以需要传入 ctx 和 next 来执行,执行后返回的是 Promise,通过catch来捕获错误。

2. 用err变量来接受的结果,只有上传错误,err才会被赋值为一个错误信息对象,否则为undefined。通过判断err是否存在就可以知道有没有发生错误了。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5114

关闭

从零实现TypeScript版Koa

这篇文章会讲些什么?如何从零开始完成一个涵盖Koa核心功能的Node.js类库,从代码层面解释Koa一些代码写法的原因:如中间件为什么必须调用next函数、ctx是怎么来的和一个请求是什么关系

koa-easywechat_一个基于koa2的微信开发中间件

koa-easywechat注意:koa-easywechat中间件要写在最前面,也就是要第一个use,因为我在ctx上挂载了一个wechat对象,这个对象实现了大部分的微信接口,这样才能保证开发者在自己的写路由里,获取到ctx.wechat进行自己的业务开发

读 koa2 源码后的一些思考与实践

Nodejs官方api支持的都是callback形式的异步编程模型。问题:callback嵌套问题,koa2 是由 Express原班人马打造的,是现在比较流行的基于Node.js平台的web开发框架,Koa 把 Express 中内置的 router、view 等功能都移除了

了解Koa和创建路由实例

koa 是由 Express 原班人马打造的,一个基于 Node.js 平台的 Web 开发框架,Express 是基于 ES5 的语法,随着新版 Node.js 开始支持 ES6 ,该团队重新编写诞生了 koa 1.0

node.js中 koa 框架的基本使用方法

安装 koa、简单使用、级联中间件的概念、获取get请求参数、获取post表单数据和文件上传、路由中间件 koa-router

Koa日志中间件封装开发详解

对于一个服务器应用来说,日志的记录是必不可少的,我们需要使用其记录项目程序每天都做了什么,什么时候发生过错误,发生过什么错误等等,便于日后回顾、实时掌握服务器的运行状态,还原问题场景

koajs--基于node.js的下一代web开发框架

Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数,Koa 帮你丢弃回调函数,并有力地增强错误处理。

基于Koa(nodejs框架)对json文件进行增删改查

想使用nodejs(koa)搭建一个完整的前后端,完成数据的增删改查,又不想使用数据库,那使用json文件吧。本文介绍了基于koa的json文件的增、删、改、查。

KOA2框架原理解析和实现

koa是一个基于node实现的一个新的web框架,它是由express框架的原班人马打造的。它的特点是优雅、简洁、表达力强、自由度高。它更express相比,它是一个更轻量的node框架

Koa中间件

Koa 应用程序是一个包含一组中间件函数的对象,它是按照类似堆栈的方式组织和执行的。当一个中间件调用 next() 则该函数暂停并将控制传递给定义的下一个中间件。当在下游没有更多的中间件执行后,堆栈将展开并且每个中间件恢复执行其上游行为

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!