Nodejs进阶:基于express+multer的文件上传
关于作者
程序猿小卡,前腾讯IMWEB团队成员,阿里云栖社区专家博主。欢迎加入 Express前端交流群(197339705)。
正在填坑:《Nodejs学习笔记》 / 《Express学习笔记》
社区链接:云栖社区 / github / 新浪微博 / 知乎 / Segmentfault / 博客园 / 站酷
概览
图片上传是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 # 前端页面,用来上传文件
基础例子:单图上传
完整示例代码请参考这里。
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 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。
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 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 上,如下代码所示。
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 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:设置资源保存在本地的文件名。
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 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的文件上传的更多相关文章
- NodeJS学习笔记 进阶 (4)基于express+muter的文件上传(ok)
个人总结:这篇文章主要讲了multer插件的使用,类似于formidable,可以用来处理post表单中的文件上传,读完这篇文章需要10分钟. 摘选自网络 概览 图片上传是web开发中经常用到的功能, ...
- 【转】NodeJS教程--基于ExpressJS框架的文件上传
本文是翻译的一篇文章,原文地址:Handle File Uploads in Express (Node.js). 在NodeJS发展早期上传文件是一个较难操作的功能,随后出现了formidable. ...
- node.js中 express + multer 处理文件上传
multer中间件,可以很方便的结合express处理用户表单上传的文件. 一.安装multer npm install multer 二.处理单个文件上传 const express = requi ...
- node.js使用express框架进行文件上传
关于node.js使用express框架进行文件上传,主要来自于最近对Settings-Sync插件做的研究.目前的研究算是取得的比较好的进展.Settings-Sync中通过快捷键上传文件,其实主要 ...
- Servlet3.0学习总结——基于Servlet3.0的文件上传
Servlet3.0学习总结(三)——基于Servlet3.0的文件上传 在Servlet2.5中,我们要实现文件上传功能时,一般都需要借助第三方开源组件,例如Apache的commons-fileu ...
- Struts2文件上传(基于表单的文件上传)
•Commons-FileUpload组件 –Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件上传的子项目 •Commons-Fil ...
- [原创]java WEB学习笔记49:文件上传基础,基于表单的文件上传,使用fileuoload 组件
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- 用c++开发基于tcp协议的文件上传功能
用c++开发基于tcp协议的文件上传功能 2005我正在一家游戏公司做程序员,当时一直在看<Windows网络编程> 这本书,把里面提到的每种IO模型都试了一次,强烈推荐学习网络编程的同学 ...
- Python 基于Python实现Ftp文件上传,下载
基于Python实现Ftp文件上传,下载 by:授客 QQ:1033553122 测试环境: Ftp客户端:Windows平台 Ftp服务器:Linux平台 Python版本:Python 2.7 ...
随机推荐
- ASP.NET MVC 拓展ViewResult实现word文档下载
最近项目中有同事用到word文档导出功能,遇到了一些导出失败问题,帮其看了下解决问题的同事,看了下之前的代码发现几个问题: 代码编写不规范,word导出功能未收口 重复代码导出都是 实现逻辑比较复 ...
- 烂泥:学习ssh之ssh密钥随身携带
本文由秀依林枫提供友情赞助,首发于烂泥行天下 在上一篇文章<烂泥:学习ssh之ssh无密码登陆>中,我们讲解了如何使用ssh密钥,免密码登陆服务器. 这篇文章我们再来讲解,如何把已经生成的 ...
- css font-weight原理
为什么要记录一下?因为今天我要设置一个字符加粗,然后就用font-weight:200,没有任何效果.现在看来很可笑,400才相当于normal,200怎么加粗,奇怪的是也没有变细.所以得研究一下fo ...
- Unity自学路线整理(参看微信公众号Unity墙外的世界的文章 )
目前还是个新手. 发现自己有时候还是会一脸蒙...的对着电脑屏幕不知所措,为了利用好在大学零散的时间所以整理一下学习unity的路线. 计划好才能更好的利用时间. 1. 先学好C#再去看引擎,我看的是 ...
- 150929-拖延高于懒-HTML(End)
四天未更了,分别是因为Xshell和虚拟机链接不好,累,懒(好像是三天..) 就像我一直嗷嗷着要去学开出一样,5年都没有去......拖延症似乎比懒癌更可怕.慢慢的慢慢的,人长大了,小时候的一些东西才 ...
- Booth Multiplication Algorithm [ASM-MIPS]
A typical implementation Booth's algorithm can be implemented by repeatedly adding (with ordinary un ...
- Python+excel实现的简单接口自动化 V0.1
好久没写博客了..最近忙着工作以及新工作的事.. 看了下以前写的简单接口自动化,拿出来总结下,也算记录下学习成果 先来贴一下最后的结果,结果是写在原来的excel中 执行完毕后,会将结果写入到“状态” ...
- ACCP7.0优化Myschool内侧题
1) 在SQL Server 中,为数据库表建立索引能够(C ). 索引:是SQL SERVER编排数据的内部方法,是检索表中数据的直接通道 建立索引的作用:大大提高了数据库的检索速度,改善数据库性能 ...
- java 22 - 5 多线程之获取和设置线程对象的名称
如何获取线程对象的名称呢? public final String getName():获取线程的名称.如何设置线程对象的名称呢? public final void setName(String n ...
- 隐写-CTF中图片隐藏文件分离方法总结
0x00 前言 在安全的大趋势下,信息安全越来越来受到国家和企业的重视,所以CTF比赛场次越来越多,而且比赛形式也不断的创新,题目也更加新颖有趣,对选手的综合信息安全能力有一个较好的考验,当然更好的是 ...