Nodejs实现文件上传的示例代码


Posted in NodeJs onSeptember 26, 2017

笔者用nodejs做项目时需要用到文件上传的功能,在网上搜索了很多教程,找到了一个express的中间件,用于处理 multipart/form-data 类型的表单数据,可以很方便的将表单中的文件数据保存到服务器。

介绍

简单的用法

定义存储器

Multer作为express的一个中间件,我们可以很方便的自定义上传的文件目录以及保存的文件名。先看一个最简单的用法, demo1地址 :

var express = require('express');
var multer = require('multer');
var app = express();

var upload = multer({
  storage: multer.diskStorage({
    destination: function (req, file, cb){
      cb(null, './uploads/');
    },
    filename: function (req, file, cb){
      //file.originalname上传文件的原始文件名
      var changedName = (new Date().getTime())+'-'+file.originalname;
      cb(null, changedName);
    }
  })
});

我们先创建了一个upload对象,这个对象中destination函数用来定义上传文件的存储的文件夹;filename函数用来修改上传文件存储到服务器的文件名称,这里我们我们加上一个时间戳简单区分一下。这两个函数都是通过回调函数来实现的。每次上传的时候这两个函数都会调用一次,如果是多个文件上传,那个这两个函数就调用多次,调用顺序是先调用destination,然后调用filename。

在两个函数中都会有一个 file 对象,表示当前上传的文件对象,有以下几个属性:

  • fieldname:上传的字段名
  • originalname:上传的文件名
  • encoding:文件的编码类型
  • mimetype:文件的MIME类型

定义路由回调

//单个文件上传
app.post('/upload/single',upload.single('singleFile'),(req,res)=>{
  console.log(req.file);
  res.json({
    code: '0000',
    type:'single',
    originalname: req.file.originalname
  })
});

//多个文件上传
app.post('/upload/multer',upload.array('multerFile'),(req,res)=>{
  console.log(req.files);
  let fileList = [];
  req.files.map((elem)=>{
    fileList.push({
      originalname: elem.originalname
    })
  });
  res.json({
    code: '0000',
    type:'multer',
    fileList:fileList
  });
});

在express中定义路由的回调函数时,把定义好了的upload对象作为中间件添加进去。如果是单个文件就用 single 方法,如果是多个文件就用 array 方法,这两个方法都需要传一个页面上定义好的字段名。

在路由的回调函数中,request对象已经有了file属性(单个文件上传)或files属性(多个文件上传),files属性是一个数组,数组的每一个对象都有以下属性:

  • fieldname:上传的字段名
  • originalname:上传的文件名
  • encoding:文件的编码类型
  • mimetype:文件的MIME类型
  • destination:存储的目录(和destination回调函数中的目录名一致)
  • filename:保存的文件名(和filename回调函数中的文件名一致)
  • path:保存的相对路径
  • size:文件的大小(单位:字节byte)

我们可以发现在路由的回调函数中的file对象比diskStorage中的file对象多了几个属性,这是因为在diskStorage中文件还没有保存,只能知道文件的大致属性;而路由的回调函数文件已经在服务器上保存好了,文件的保存路径以及文件的大小都是已知的。

过滤文件上传

在文件上传时,有时候会上传一些我们不需要的文件类型,我们需要把一些不需要的文件给过滤掉。demo2地址 。

文件类型过滤

var upload = multer({
  //...其他代码
  fileFilter: function(req, file, cb){
    if(file.mimetype == 'image/png'){
      cb(null, true)
    } else {
      cb(null, false)
    }
  }
});

在定义存储器的时候,新增一个fileFilter函数,用来过滤掉我们不需要的文件,在回调函数中我们传入true/false来代表是否要保存;如果传了false,那么destination函数和filename函数也不会调用了。

文件大小和数量过滤

var upload = multer({
  //...其他代码
  limits:{
    //限制文件大小10kb
    fileSize: 10*1000,
    //限制文件数量
    files: 5
  }
});

在定义存储器的时候,新增一个limits对象,用来控制上传的一些信息,它有以下一些属性:

  • fieldNameSize:field 名字最大长度,默认值:100 bytes
  • fieldSize:field 值的最大长度,默认值:1MB
  • fields:非文件 field 的最大数量
  • fileSize:在multipart表单中, 文件最大长度 (字节单位)
  • files:在multipart表单中, 文件最大数量
  • parts:在multipart表单中, part传输的最大数量(fields + files)

在这边我们把fileSize的值设置得小一点,设为10kb方便测试看效果,但是如果这个时候会发现有报错。因为上传的文件大小很容易就会超过10KB,导致有报错出现,我们就需要在路由回调里对错误的情况进行捕获。

//单个文件上传
let singleUpload = upload.single('singleFile');
app.post('/upload/single',(req,res)=>{
  singleUpload(req,res,(err)=>{
    if(!!err){
      console.log(err.message)
      res.json({
        code: '2000',
        type:'single',
        originalname: '',
        msg: err.message
      })
      return;
    }
    if(!!req.file){
      res.json({
        code: '0000',
        type:'single',
        originalname: req.file.originalname,
        msg: ''
      })
    } else {
      res.json({
        code: '1000',
        type:'single',
        originalname: '',
        msg: ''
      })
    }
  });
});

//多个文件上传
let multerUpload = upload.array('multerFile');
app.post('/upload/multer', (req,res)=>{
  multerUpload(req,res,(err)=>{
    if(!!err){
      res.json({
        code: '2000',
        type:'multer',
        fileList:[],
        msg: err.message
      });
    }
    let fileList = [];
    req.files.map((elem)=>{
      fileList.push({
        originalname: elem.originalname
      })
    });
    res.json({
      code: '0000',
      type:'multer',
      fileList:fileList,
      msg:''
    });
  });
});

所有的demo代码都在这个 仓库里

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
详谈nodejs异步编程
Dec 04 NodeJs
nodejs加密Crypto的实例代码
Jul 07 NodeJs
详解nodejs 文本操作模块-fs模块(一)
Dec 22 NodeJs
详解NodeJs支付宝移动支付签名及验签
Jan 06 NodeJs
基于nodejs 的多页面爬虫实例代码
May 31 NodeJs
nodejs socket服务端和客户端简单通信功能
Sep 14 NodeJs
nodejs实现超简单生成二维码的方法
Mar 17 NodeJs
nodejs搭建本地服务器并访问文件操作示例
May 11 NodeJs
搭建一个nodejs脚手架的方法步骤
Jun 28 NodeJs
Nodejs实现图片上传、压缩预览、定时删除功能
Oct 25 NodeJs
nodejs制作小爬虫功能示例
Feb 24 NodeJs
分享五个Node.js开发的优秀实践 
Apr 07 NodeJs
详解nodejs通过代理(proxy)发送http请求(request)
Sep 22 #NodeJs
使用vs code开发Nodejs程序的使用方法
Sep 21 #NodeJs
详解使用vscode+es6写nodejs服务端调试配置
Sep 21 #NodeJs
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
Sep 19 #NodeJs
Nodejs中使用phantom将html转为pdf或图片格式的方法
Sep 18 #NodeJs
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
Sep 18 #NodeJs
Nodejs+express+ejs简单使用实例代码
Sep 18 #NodeJs
You might like
PHP 日,周,月点击排行统计
2012/01/11 PHP
PHP加密解密实例分析
2015/12/25 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
layui使用数据表格实现购物车功能
2019/07/26 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
Python多线程实例教程
2014/09/06 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
对Python中的@classmethod用法详解
2018/04/21 Python
kafka-python批量发送数据的实例
2018/12/27 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
python实现微信自动回复机器人功能
2019/07/11 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
企业治理工作自我评价
2013/09/26 职场文书
生产总经理岗位职责
2013/12/19 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
导师鉴定意见
2015/06/05 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
pandas中对文本类型数据的处理小结
2021/11/01 Python
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python
Hive HQL支持2种查询语句风格
2022/06/25 数据库