Nodejs学习笔记（八）--- Node.js + Express 实现上传文件功能（felixge/node-formidable）
目录
前言
前面讲了一个构建网站的示例，这次在此基础上再说说web的常规功能----文件上传，示例以一个上传图片的功能为例子
上传功能命名用formidable实现，示例很简单!
PS：最近比较忙，距上一次更新已经比较久了^_^!
formidable简介
nodejs原生实现上传还是比较麻烦，有兴趣的自已去参考一下网上有网友写的代码
这里选择了formidable，也是github上同类功能模块人气比较高的
https://github.com/felixge/node-formidable
https://www.npmjs.org/package/formidable
优点：上传速度比较可观，占用内存也比较低，简单易用...
创建项目安装formidable
1.创建项目sampleUpload
cd 工作目录
express -e sampleUpload
2.修改package.json文件，添加formidable依赖项
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"express": "~4.0.0",
"static-favicon": "~1.0.0",
"morgan": "~1.0.0",
"cookie-parser": "~1.0.1",
"body-parser": "~1.0.0",
"debug": "~0.7.4",
"ejs": "~0.8.5",
"formidable" : "latest"
}
}
3.安装依赖项
cd sampleUpload && npm install
安装成功，一切准备就绪，开始完成这个功能！
实现上传功能
1.index.ejs文件中构建表单并实现前端验证（样式使用和http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 一致）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title> <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/signin.css" />
</head> <body> <div id="container" class="container">
<% if (locals.success) { %>
<div id="alt_sucess" class="alert alert-success">
<%- success %>
</div>
<% } %> <% if (locals.error) { %>
<div id="alt_warning" class="alert alert-warning">
<%= error %>
</div>
<% } %> <form class="form-signin" role="form" method="post" enctype='multipart/form-data'>
<h2 class="form-signin-heading">上传文件</h2>
<input id="fulAvatar" name="fulAvatar" type="file" class="form-control" />
<br/>
<button id="btnSub" class="btn btn-lg btn-primary" type="submit">上 传</button>
</form> </div>
</body>
</html> <script src="/javascripts/jquery-1.11.1.min.js" type="text/javascript"></script> <script type="text/javascript">
String.prototype.format = function (args) {
var result = this;
if (arguments.length > 0) {
if (arguments.length == 1 && typeof (args) == "object") {
for (var key in args) {
if (args[key] != undefined) {
var reg = new RegExp("({" + key + "})", "g");
result = result.replace(reg, args[key]);
}
}
}
else {
for (var i = 0; i < arguments.length; i++) {
if (arguments[i] != undefined) {
var reg = new RegExp("({)" + i + "(})", "g");
result = result.replace(reg, arguments[i]);
}
}
}
}
return result;
} $(function(){
$('#btnSub').on('click',function(){
var fulAvatarVal = $('#fulAvatar').val(),
errorTip = '<div id="errorTip" class="alert alert-warning">{0}</div> '; $("#errorTip,#alt_warning").remove(); if(fulAvatarVal.length == 0)
{
$("#container").prepend(errorTip.format('请选择要上传的文件'));
return false;
} var extName = fulAvatarVal.substring(fulAvatarVal.lastIndexOf('.'),fulAvatarVal.length).toLowerCase(); if(extName != '.png' && extName != '.jpg'){
$("#container").prepend(errorTip.format('只支持png和jpg格式图片'));
return false;
} return true;
})
}); </script>
这里一定要注意表单的enctype属性，这个就不多作解释了，如果是初次接触，看看http://www.w3school.com.cn/tags/att_form_enctype.asp
2.实现index.js中上传逻辑
var express = require('express')
router = express.Router(),
formidable = require('formidable'),
fs = require('fs'),
TITLE = 'formidable上传示例',
AVATAR_UPLOAD_FOLDER = '/avatar/'
/* GET home page. */
router.get('/', function(req, res) {
res.render('index', { title: TITLE });
});
router.post('/', function(req, res) {
var form = new formidable.IncomingForm(); //创建上传表单
form.encoding = 'utf-8'; //设置编辑
form.uploadDir = 'public' + AVATAR_UPLOAD_FOLDER; //设置上传目录
form.keepExtensions = true; //保留后缀
form.maxFieldsSize = 2 * 1024 * 1024; //文件大小
form.parse(req, function(err, fields, files) {
if (err) {
res.locals.error = err;
res.render('index', { title: TITLE });
return;
}
var extName = ''; //后缀名
switch (files.fulAvatar.type) {
case 'image/pjpeg':
extName = 'jpg';
break;
case 'image/jpeg':
extName = 'jpg';
break;
case 'image/png':
extName = 'png';
break;
case 'image/x-png':
extName = 'png';
break;
}
if(extName.length == 0){
res.locals.error = '只支持png和jpg格式图片';
res.render('index', { title: TITLE });
return;
}
var avatarName = Math.random() + '.' + extName;
var newPath = form.uploadDir + avatarName;
console.log(newPath);
fs.renameSync(files.fulAvatar.path, newPath); //重命名
});
res.locals.success = '上传成功';
res.render('index', { title: TITLE });
});
module.exports = router;
注意：在public文件夹中创建avatar文件夹以供文件存放
运行结果
1.在app.js中添加8000端口的监听
2.cd到项目根目录，运行 node app
3.浏览器上访问 localhost:8000
4.上传图片
5.去上传文件夹中查看
大功告成！
部分疑惑解析
有一些在代码中有注释的我就不解释了
1.怎么没看到上传？
注意：form.parse 再看看formidable的解释
Automatically writing file uploads to disk
2.为什么需要fs.renameSync
原因和上一个问题有关，它会自动被上传到用户的临时目录（这个可以把files.fulAvatar.path输出来看一下便知） http://nodejs.org/docs/latest/api/fs.html#fs_fs_renamesync_oldpath_newpath
3.可不可以看到上传进度
可以，https://github.com/felixge/node-formidable#events （仔细看看events，可能有你要用的其它部分）
但是只是在控制台输出，想在前端去显示进度条是不行的（没有去研究，想想别的办法应该也可以）
4.文件名想命名UUID不重复，在nodejs中怎么办？
可以使用node-uuid，调用简单 https://github.com/broofa/node-uuid
...
其它的留言问吧^_^!
写在之后
功能比较简单，代码也是示例风格，大家主要关注一下使用
代码结构优化方向：
1.比如文件后缀这一类的方法可以放到一个pub.js中，此js专门用于这些公有方法
2.可以利于返回值的方式去返回数据，前端根据返回值做出相应的提示
3.可以利于jquery.form.js去提交表单，post中用res.json方法返回值，优化体验（同样引用这个js也会增大页面体积）
....
总之是个小例子，大家将就着看看吧^_^!
Nodejs学习笔记（八）--- Node.js + Express 实现上传文件功能（felixge/node-formidable）的更多相关文章
- Nodejs学习笔记（八）—Node.js + Express 实现上传文件功能（felixge/node-formidable）
前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能----文件上传,示例以一个上传图片的功能为例子 上传功能命名用formidable实现,示例很简单! PS:最近比较忙,距上一次 ...
- Web 在线文件管理器学习笔记与总结（19）上传文件
dir.func.php 中添加方法: /* 上传文件 */ function uploadFile($fileInfo,$path,$allowExt = array('jpg','jpeg','p ...
- 基于node.js的websocket上传小功能
一.node.js 在目录里新建index.js var ws = require("nodejs-websocket"); console.log("开始建立连接... ...
- Android学习笔记_13_网络通信之多个上传文件
一.获取HTTP协议: 建立一个Web项目,建立一个如下所示的jsp界面,用IE捕获表单提交信息. <%@ page language="java" contentType= ...
- js方法实现--上传文件功能
function createUploadForm(fileElementId, data, curFileList) { var id = new Date().getTime(); var for ...
- js实现分段上传文件
使用js实现分段上传文件,本文使用了FileReader对象,可参考:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader 1)获取文 ...
- Servlet学习：（三）Servlet3.0 上传文件
转: Servlet学习:(三)Servlet3.0 上传文件 2018年08月03日 11:57:58 iDark_CSDN 阅读数:362 一.注意事项 客户端(浏览器) 表单的提交方法必须是 ...
- NodeJS学习笔记 进阶 (4)基于express+muter的文件上传(ok)
个人总结:这篇文章主要讲了multer插件的使用,类似于formidable,可以用来处理post表单中的文件上传,读完这篇文章需要10分钟. 摘选自网络 概览 图片上传是web开发中经常用到的功能, ...
- JS 异步分段上传文件
为了解决大文件上传 (PHP上传最大限制2GB) 同时为了解决文件上传是对服务器造成的压力 可以通过分段上传解决这个问题,这得益于HTML5开发的file API 前台代码: 引用了进度条插件myPr ...
随机推荐
- expdp\impdp及exp\imp
数据泵文件 expdp介绍 EXPDP命令行选项1. ATTACH该选项用于在客户会话与已存在导出作用之间建立关联.语法如下ATTACH=[schema_name.]job_nameSchema_na ...
- 《CSS3秘籍》（第三版）-读书笔记(3)
第9章 装饰网站导航 1. 选择要定义样式的链接 大部分浏览器都支持4种基本的链接状态:未访问的链接.已访问的链接.访问者的鼠标正悬停在上方的链接,以及正被单击的链接.CSS提供了与这些状态对应的4 ...
- GridView中实现CheckBox的全选
GridView中实现CheckBox的全选 用服务器端的方法: 在页面上放一个gridview控件,配置好数据源,编辑列, <asp:GridView ID="GridView1&q ...
- jsp学习--如何定位错误和JSP和Servlet的比较
一.如何查找JSP页面中的错误 JSP页面中的JSP语法格式有问题,导致其不能被翻译成Servlet源文件,JSP引擎将提示这类错误发生在JSP页面中的位置(行和列)以及相关信息.JSP页面中的JS ...
- [z]vs中无法加入断点进行调试的解决方案
http://blog.chinaunix.net/uid-15464162-id-3799069.html [ 1] 以前也遇到过同样的问题,但没有问个为什么,也没有探个毕竟.昨天调试一个DLL,添 ...
- IOS网络编程。。
ASI 与AFN框架: 越低层性能越好. AFNetworking ASIHTTPRequest(性能好点) NSURL会更好. NSURL NSURLRequest NSData * data = ...
- [转]Caffe 深度学习框架上手教程
Caffe 深度学习框架上手教程 机器学习Caffe caffe 原文地址:http://suanfazu.com/t/caffe/281 blink 15年1月 6 Caffe448是一个清 ...
- [php-src]窥探Php内核中的变量
内容均以php-5.6.14为例. 在看各种组合数据类型之前,有必要先熟悉下 Zend/zend_types.h 里面的自定义数据类型. #ifndef ZEND_TYPES_H // 防止多次 in ...
- Visual studio 非常好的插件
1. Productive power tools2015 2. Visual studio spell checker
- maven 创建Hadoop程序
这里用来将新建的maven project 放入到现有的maven working set 中,这样我们就能看到项目之间的层级关系 选择下面的程序 在父项目中创建公共的pom,在pom中维护项目所需要 ...