Nodejs进阶:基于express+multer的文件上传实例


Posted in NodeJs onNovember 21, 2016

概览

图片上传是web开发中经常用到的功能,node社区在这方面也有了相对完善的支持。

常用的开源组件有multer、formidable等,借助这两个开源组件,可以轻松搞定图片上传。

本文主要讲解以下内容,后续章节会对技术实现细节进行深入挖掘。

  • 基础例子:借助express、multer实现单图、多图上传。
  • 常用API:获取上传的图片的信息。
  • 进阶使用:自定义保存的图片路径、名称。

环境初始化

非常简单,一行命令。

npm install express multer multer --save

每个示例下面,都有下面两个文件

➜ upload-custom-filename git:(master) ✗ tree -L 1
.
├── app.js # 服务端代码,用来处理文件上传请求
├── form.html # 前端页面,用来上传文件

基础例子:单图上传

app.js。

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

var app = express();
var upload = multer({ dest: 'upload/' });

// 单图上传
app.post('/upload', upload.single('logo'), function(req, res, next){
  res.send({ret_code: '0'});
});

app.get('/form', function(req, res, next){
  var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
  res.send(form);
});

app.listen(3000);

form.html。

<form action="/upload-single" method="post" enctype="multipart/form-data">
  <h2>单图上传</h2>
  <input type="file" name="logo">
  <input type="submit" value="提交">
</form>

运行服务。

node app.js

访问 http://127.0.0.1:3000/form ,选择图片,点击“提交”,done。然后,你就会看到 upload 目录下多了个图片。

基础例子:多图上传

代码简直不能更简单,将前面的 upload.single('logo') 改成 upload.array('logo', 2) 就行。表示:同时支持2张图片上传,并且 name 属性为 logo。

app.js。

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

var app = express();
var upload = multer({ dest: 'upload/' });

// 多图上传
app.post('/upload', upload.array('logo', 2), function(req, res, next){
  res.send({ret_code: '0'});
});

app.get('/form', function(req, res, next){
  var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
  res.send(form);
});

app.listen(3000);

form.html。

<form action="/upload-multi" method="post" enctype="multipart/form-data">
  <h2>多图上传</h2>
  <input type="file" name="logos">
  <input type="file" name="logos">
  <input type="submit" value="提交">
</form>

同样的测试步骤,不赘述。

获取上传的图片的信息

很多时候,除了将图片保存在服务器外,我们还需要做很多其他事情,比如将图片的信息存到数据库里。

常用的信息比如原始文件名、文件类型、文件大小、本地保存路径等。借助multer,我们可以很方便的获取这些信息。

还是单文件上传的例子,此时,multer会将文件的信息写到 req.file 上,如下代码所示。

app.js。

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

var app = express();
var upload = multer({ dest: 'upload/' });

// 单图上传
app.post('/upload', upload.single('logo'), function(req, res, next){
  var file = req.file;

  console.log('文件类型:%s', file.mimetype);
  console.log('原始文件名:%s', file.originalname);
  console.log('文件大小:%s', file.size);
  console.log('文件保存路径:%s', file.path);

  res.send({ret_code: '0'});
});

app.get('/form', function(req, res, next){
  var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
  res.send(form);
});

app.listen(3000);

form.html。

<form action="/upload" method="post" enctype="multipart/form-data">
  <h2>单图上传</h2>
  <input type="file" name="logo">
  <input type="submit" value="提交">
</form>

启动服务,上传文件后,就会看到控制台下打印出的信息。

文件类型:image/png
原始文件名:1.png
文件大小:18379
文件保存路径:upload/b7e4bb22375695d92689e45b551873d9

自定义文件上传路径、名称

有的时候,我们想要定制文件上传的路径、名称,multer也可以方便的实现。

自定义本地保存的路径

非常简单,比如我们想将文件上传到 my-upload 目录下,修改下 dest 配置项就行。

var upload = multer({ dest: 'upload/' });

在上面的配置下,所有资源都是保存在同个目录下。有时我们需要针对不同文件进行个性化设置,那么,可以参考下一小节的内容。

自定义本地保存的文件名

代码稍微长一点,单同样简单。multer 提供了 storage 这个参数来对资源保存的路径、文件名进行个性化设置。

使用注意事项如下:

  • destination:设置资源的保存路径。注意,如果没有这个配置项,默认会保存在 /tmp/uploads 下。此外,路径需要自己创建。
  • filename:设置资源保存在本地的文件名。

app.js。

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

var app = express();

var createFolder = function(folder){
  try{
    fs.accessSync(folder); 
  }catch(e){
    fs.mkdirSync(folder);
  } 
};

var uploadFolder = './upload/';

createFolder(uploadFolder);

// 通过 filename 属性定制
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, uploadFolder);  // 保存的路径,备注:需要自己创建
  },
  filename: function (req, file, cb) {
    // 将保存文件名设置为 字段名 + 时间戳,比如 logo-1478521468943
    cb(null, file.fieldname + '-' + Date.now()); 
  }
});

// 通过 storage 选项来对 上传行为 进行定制化
var upload = multer({ storage: storage })

// 单图上传
app.post('/upload', upload.single('logo'), function(req, res, next){
  var file = req.file;
  res.send({ret_code: '0'});
});

app.get('/form', function(req, res, next){
  var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
  res.send(form);
});

app.listen(3000);

form.html。

<form action="/upload" method="post" enctype="multipart/form-data">
  <h2>单图上传</h2>
  <input type="file" name="logo">
  <input type="submit" value="提交">
</form>

测试步骤不赘述,访问一下就知道效果了。

写在后面

本文对multer的基础用法进行了介绍,并未涉及过多原理性的东西。俗话说 授人以渔不如授人以渔,在后续的章节里,会对文件上传的细节进行挖掘,好让读者朋友对文件上传加深进一步的认识。
相关链接

multer官方文档:https://github.com/expressjs/multer

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

NodeJs 相关文章推荐
nodejs win7下安装方法
May 24 NodeJs
Windows系统下使用Sublime搭建nodejs环境
Apr 13 NodeJs
详解nodejs与javascript中的aes加密
May 22 NodeJs
Jquery通过ajax请求NodeJS返回json数据实例
Nov 08 NodeJs
Nodejs多站点切换Htpps协议详解及简单实例
Feb 23 NodeJs
nodejs中使用HTTP分块响应和定时器示例代码
Mar 19 NodeJs
nodejs获取微信小程序带参数二维码实现代码
Apr 12 NodeJs
详解Windows下安装Nodejs步骤
May 18 NodeJs
NodeJS实现图片上传代码(Express)
Jun 30 NodeJs
nodejs实现爬取网站图片功能
Dec 14 NodeJs
webstorm中配置nodejs环境及npm的实例
May 15 NodeJs
nodejs实现UDP组播示例方法
Nov 04 NodeJs
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
Nov 21 #NodeJs
Nodejs下DNS缓存问题浅析
Nov 16 #NodeJs
NodeJS中的MongoDB快速入门详细教程
Nov 11 #NodeJs
Nodejs中解决cluster模块的多进程如何共享数据问题
Nov 10 #NodeJs
NodeJS整合银联网关支付(DEMO)
Nov 09 #NodeJs
nodejs的HTML分析利器node-jquery用法浅析
Nov 08 #NodeJs
Jquery通过ajax请求NodeJS返回json数据实例
Nov 08 #NodeJs
You might like
php通过ajax实现双击table修改内容
2014/04/28 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
php生成验证码函数
2015/10/20 PHP
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
Python中的heapq模块源码详析
2019/01/08 Python
python多线程同步实例教程
2019/08/11 Python
利用python实现AR教程
2019/11/20 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
零基础小白多久能学会python
2020/06/22 Python
Django框架请求生命周期实现原理
2020/11/13 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
手机促销活动方案
2014/02/05 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
2014年学生工作总结
2014/11/20 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
老公出轨后的保证书
2015/05/08 职场文书
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android