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文件中构建表单并实现前端验证(样式使用和https://cloud.tencent.com/developer/article/1020656一致)
<!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也会增大页面体积)
....
总之是个小例子,大家将就着看看吧^_^!
- 【高能】用PyMC3进行贝叶斯统计分析(代码+实例)
- 【Java SE】Java NIO系列教程(十二)Java NIO与IO
- 【贝叶斯系列】预测未来回报的交易算法基于Bayesian cone
- android viewgroup事件分发机制
- Rafy 领域实体框架示例(1) - 转换传统三层应用程序
- android view事件分发机制
- Rafy 领域实体框架演示(2) - 新功能展示
- ormlite介绍一
- 从Encoder到Decoder实现Seq2Seq模型(算法+代码)
- 【Java SE】Java NIO系列教程(六) Selector
- Rafy 领域实体框架演示(3) - 快速使用 C/S 架构部署
- Rafy 领域实体框架演示(4) - 使用本地文件型数据库 SQLCE 绿色部署
- spring 的OpenSessionInViewFilter简介
- Android TextView中文字通过SpannableString来设置超链接、颜色、字体等属性
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Centos7.x安装Docker
- 实在是妙啊!Java中强软虚弱引用,居然还能这样去操作
- 数据库连接池引起的FullGC问题,看我如何一步步排查、分析、解决
- Swift 数组dropFirst方法
- Swift 类方法和实例方法
- 我从未见过的牛逼解说方式!Redis五种数据结构,看一遍就懂了
- Swift 动态创建ViewController
- Office 文档解析 文档格式和协议
- 查看centos 7里敏感信息的常用命令(未完)
- C# dotnet 使用 FileStream 随机文件读写
- datables之加载数据时显示进度条
- 这几种常见的“分布式锁”写法,搞懂再也不怕面试官,安排
- C# 8.0 文件长度 Bytes 字节转 KB 等单位字符串
- LeetCode---两数之和
- 通过 cmd 批处理文件将 16 进制转 10 进制数字