关于作者

程序猿小卡,前腾讯IMWEB团队成员,阿里云栖社区专家博主。欢迎加入 Express前端交流群(197339705)。

正在填坑:《Nodejs学习笔记》 / 《Express学习笔记》

社区链接:云栖社区 / github / 新浪微博 / 知乎 / Segmentfault / 博客园 / 站酷

概览

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

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

本文主要讲解以下内容,后续章节会对技术实现细节进行深入挖掘。本文所有例子均有代码示例,可在这里查看。

  • 基础例子:借助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="logo">
<input type="file" name="logo">
<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进阶:基于express+multer的文件上传的更多相关文章

  1. NodeJS学习笔记 进阶 (4)基于express+muter的文件上传(ok)

    个人总结:这篇文章主要讲了multer插件的使用,类似于formidable,可以用来处理post表单中的文件上传,读完这篇文章需要10分钟. 摘选自网络 概览 图片上传是web开发中经常用到的功能, ...

  2. 【转】NodeJS教程--基于ExpressJS框架的文件上传

    本文是翻译的一篇文章,原文地址:Handle File Uploads in Express (Node.js). 在NodeJS发展早期上传文件是一个较难操作的功能,随后出现了formidable. ...

  3. node.js中 express + multer 处理文件上传

    multer中间件,可以很方便的结合express处理用户表单上传的文件. 一.安装multer npm install multer 二.处理单个文件上传 const express = requi ...

  4. node.js使用express框架进行文件上传

    关于node.js使用express框架进行文件上传,主要来自于最近对Settings-Sync插件做的研究.目前的研究算是取得的比较好的进展.Settings-Sync中通过快捷键上传文件,其实主要 ...

  5. Servlet3.0学习总结——基于Servlet3.0的文件上传

    Servlet3.0学习总结(三)——基于Servlet3.0的文件上传 在Servlet2.5中,我们要实现文件上传功能时,一般都需要借助第三方开源组件,例如Apache的commons-fileu ...

  6. Struts2文件上传(基于表单的文件上传)

    •Commons-FileUpload组件 –Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件上传的子项目   •Commons-Fil ...

  7. [原创]java WEB学习笔记49:文件上传基础,基于表单的文件上传,使用fileuoload 组件

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  8. 用c++开发基于tcp协议的文件上传功能

    用c++开发基于tcp协议的文件上传功能 2005我正在一家游戏公司做程序员,当时一直在看<Windows网络编程> 这本书,把里面提到的每种IO模型都试了一次,强烈推荐学习网络编程的同学 ...

  9. Python 基于Python实现Ftp文件上传,下载

    基于Python实现Ftp文件上传,下载   by:授客 QQ:1033553122 测试环境: Ftp客户端:Windows平台 Ftp服务器:Linux平台 Python版本:Python 2.7 ...

随机推荐

  1. ASP.NET MVC 拓展ViewResult实现word文档下载

      最近项目中有同事用到word文档导出功能,遇到了一些导出失败问题,帮其看了下解决问题的同事,看了下之前的代码发现几个问题: 代码编写不规范,word导出功能未收口 重复代码导出都是 实现逻辑比较复 ...

  2. 烂泥:学习ssh之ssh密钥随身携带

    本文由秀依林枫提供友情赞助,首发于烂泥行天下 在上一篇文章<烂泥:学习ssh之ssh无密码登陆>中,我们讲解了如何使用ssh密钥,免密码登陆服务器. 这篇文章我们再来讲解,如何把已经生成的 ...

  3. css font-weight原理

    为什么要记录一下?因为今天我要设置一个字符加粗,然后就用font-weight:200,没有任何效果.现在看来很可笑,400才相当于normal,200怎么加粗,奇怪的是也没有变细.所以得研究一下fo ...

  4. Unity自学路线整理(参看微信公众号Unity墙外的世界的文章 )

    目前还是个新手. 发现自己有时候还是会一脸蒙...的对着电脑屏幕不知所措,为了利用好在大学零散的时间所以整理一下学习unity的路线. 计划好才能更好的利用时间. 1. 先学好C#再去看引擎,我看的是 ...

  5. 150929-拖延高于懒-HTML(End)

    四天未更了,分别是因为Xshell和虚拟机链接不好,累,懒(好像是三天..) 就像我一直嗷嗷着要去学开出一样,5年都没有去......拖延症似乎比懒癌更可怕.慢慢的慢慢的,人长大了,小时候的一些东西才 ...

  6. Booth Multiplication Algorithm [ASM-MIPS]

    A typical implementation Booth's algorithm can be implemented by repeatedly adding (with ordinary un ...

  7. Python+excel实现的简单接口自动化 V0.1

    好久没写博客了..最近忙着工作以及新工作的事.. 看了下以前写的简单接口自动化,拿出来总结下,也算记录下学习成果 先来贴一下最后的结果,结果是写在原来的excel中 执行完毕后,会将结果写入到“状态” ...

  8. ACCP7.0优化Myschool内侧题

    1) 在SQL Server 中,为数据库表建立索引能够(C ). 索引:是SQL SERVER编排数据的内部方法,是检索表中数据的直接通道 建立索引的作用:大大提高了数据库的检索速度,改善数据库性能 ...

  9. java 22 - 5 多线程之获取和设置线程对象的名称

    如何获取线程对象的名称呢? public final String getName():获取线程的名称.如何设置线程对象的名称呢? public final void setName(String n ...

  10. 隐写-CTF中图片隐藏文件分离方法总结

    0x00 前言 在安全的大趋势下,信息安全越来越来受到国家和企业的重视,所以CTF比赛场次越来越多,而且比赛形式也不断的创新,题目也更加新颖有趣,对选手的综合信息安全能力有一个较好的考验,当然更好的是 ...