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 的 session 简单使用
Jun 06 NodeJs
详解nodejs微信公众号开发——2.自动回复
Apr 10 NodeJs
win系统下nodejs环境安装配置
May 04 NodeJs
详解Windows下安装Nodejs步骤
May 18 NodeJs
Nodejs进阶之服务端字符编解码和乱码处理
Sep 04 NodeJs
nodejs中密码加密处理操作详解
Mar 20 NodeJs
webstorm中配置nodejs环境及npm的实例
May 15 NodeJs
Nodejs Express 通过log4js写日志到Logstash(ELK)
Aug 30 NodeJs
CentOS7中源码编译安装NodeJS的完整步骤
Oct 13 NodeJs
NodeJs实现简单的爬虫功能案例分析
Dec 05 NodeJs
Nodejs + sequelize 实现增删改查操作
Nov 07 NodeJs
如何利用nodejs自动定时发送邮件提醒(超实用)
Dec 01 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
php curl选项列表(超详细)
2013/07/01 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
python unittest实现api自动化测试
2018/04/04 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
客服工作职责
2013/12/11 职场文书
食品采购员岗位职责
2014/04/14 职场文书
学校标语大全
2014/06/19 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers