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开发环境配置与使用
Nov 17 NodeJs
轻松创建nodejs服务器(10):处理上传图片
Dec 18 NodeJs
Nodejs学习笔记之Global Objects全局对象
Jan 13 NodeJs
使用NodeJs 开发微信公众号(三)微信事件交互实例
Mar 02 NodeJs
Nodejs中使用phantom将html转为pdf或图片格式的方法
Sep 18 NodeJs
nodejs实现爬取网站图片功能
Dec 14 NodeJs
NodeJS简单实现WebSocket功能示例
Feb 10 NodeJs
NodeJs搭建本地服务器之使用手机访问的实例讲解
May 12 NodeJs
Nodejs实现的操作MongoDB数据库功能完整示例
Feb 02 NodeJs
Sublime Text3 配置 NodeJs 环境的方法
May 20 NodeJs
NodeJS开发人员常见五个错误理解
Oct 14 NodeJs
用Nodejs实现在终端中炒股的实现
Oct 18 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最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
详解ES6中的Map与Set集合
2019/03/22 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
Python将字符串常量转化为变量方法总结
2019/03/17 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
如何用Python徒手写线性回归
2021/01/25 Python
大学活动策划书范文
2014/01/10 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
单位收入证明范本
2015/06/18 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang