NodeJS-图片上传(Express)
2016-01-18 22:13
666 查看
文件上传是每个网站不可避免的,最近需要做些上传图片的功能,主要解决两个问题,一个是文件上传样式和服务端路径保存,功能很简单,做起来倒是没那么简单,先从最简单的页面的上传页面的样式开始。
![](http://images2015.cnblogs.com/blog/485855/201601/485855-20160118212805875-580864301.png)
上传图片样式:
CSS样式:
Html点击上传有两种比较常用的方式iFrame上传和Ajax上传,本文采用了Ajax上传是HTML5提出了XMLHttpRequest对象的第二版,传递文件数据主要是通过FormData实现:
上传图片
不同用户上传置放在不同的位置,根据需求来设置,当然也有可以每张图片都给不同的id编号,推荐第三方uuid插件:https://github.com/broofa/node-uuid
文件重命名:
文件上传进度:
node-formidable有很多官方API还有很多设置的选项,本文根据需求设置了几项,有额外需求的可以参考官方地址~
页面样式
Html页面默认的上传的是比较难看的,需要重做一个背景图片,通过背景图片添加上传的图片:![](http://images2015.cnblogs.com/blog/485855/201601/485855-20160118212805875-580864301.png)
上传图片样式:
<div class="upload-container"> <input type="file" name="fileToUpload" id="fileToUpload" class="fileupload" /> </div>
CSS样式:
.upload-container { background-image: url(../../images/rv/add.jpg); background-repeat: no-repeat; width: 180px; height: 200px; padding-bottom: 10px; display: inline-block; vertical-align: middle; .fileupload { opacity: 0; filter: alpha(opacity=0); width: 200px; height: 200px; } }
Html点击上传有两种比较常用的方式iFrame上传和Ajax上传,本文采用了Ajax上传是HTML5提出了XMLHttpRequest对象的第二版,传递文件数据主要是通过FormData实现:
$('.fileupload').change(function(event) { /* Act on the event */ if ($('.fileupload').val().length) { var fileName = $('.fileupload').val(); var extension = fileName.substring(fileName.lastIndexOf('.'), fileName.length).toLowerCase(); if (extension == ".jpg" || extension == ".png") { var data = new FormData(); data.append('upload', $('#fileToUpload')[0].files[0]); $.ajax({ url: 'apply/upload', type: 'POST', data: data, cache: false, contentType: false, //不可缺参数 processData: false, //不可缺参数 success: function(data) { console.log(data); }, error: function() { console.log('error'); } }); } } });
服务端保存
NodeJS服务端保存需要使用了第三方插件node-formidable,npm安装地址:npm install formidable@latest
上传图片
var cacheFolder = 'public/images/uploadcache/'; exports.upload = function(req, res) { var currentUser = req.session.user; var userDirPath =cacheFolder+ currentUser.id; if (!fs.existsSync(userDirPath)) { fs.mkdirSync(userDirPath); } var form = new formidable.IncomingForm(); //创建上传表单 form.encoding = 'utf-8'; //设置编辑 form.uploadDir = userDirPath; //设置上传目录 form.keepExtensions = true; //保留后缀 form.maxFieldsSize = 2 * 1024 * 1024; //文件大小 form.type = true; var displayUrl; form.parse(req, function(err, fields, files) { if (err) { res.send(err); return; } var extName = ''; //后缀名 switch (files.upload.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.send({ code: 202, msg: '只支持png和jpg格式图片' }); return; } else { var avatarName = '/' + Date.now() + '.' + extName; var newPath = form.uploadDir + avatarName; displayUrl = UPLOAD_FOLDER + currentUser.id + avatarName; fs.renameSync(files.upload.path, newPath); //重命名 res.send({ code: 200, msg: displayUrl }); } }); };
不同用户上传置放在不同的位置,根据需求来设置,当然也有可以每张图片都给不同的id编号,推荐第三方uuid插件:https://github.com/broofa/node-uuid
文件重命名:
fs.renameSync(files.upload.path, newPath); //重命名
文件上传进度:
form.on('progress', function(bytesReceived, bytesExpected) { });
node-formidable有很多官方API还有很多设置的选项,本文根据需求设置了几项,有额外需求的可以参考官方地址~
相关文章推荐
- Nodejs·构建web应用
- salt nodegroup
- nodemon 基本配置与使用
- UML分析AsyncDisplayKit框架-ASMuplexImageNode异步下载时序图。
- Deepin 安装nodejs
- nodejs之防jade
- 【nodejs那些事儿】Nodejs && npm超灵活安装 -- Windows篇
- Nodejs之核心EventEmitter介绍
- 《Node.js入门》Windows 7下Node.js Web开发环境搭建笔记
- 使用hadoop过程中两次datanode无法启动问题
- DataNode引用计数磁盘选择策略
- Hadoop Yarn 集群 从节点的data node没有启动成功
- NodeJS实现阿里大鱼短信通知发送
- Hadoop Yarn集群 主节点的 data node没有启动成功
- Node.js_Stream流
- node.js+express制作网页计算器
- Node.js_Buffer缓冲区
- hadoop Yarn 搭建集群时错误 主节点 NameNode 没有启动成功
- INODE校园网客户端一直停在验证成功那一步
- NodeJS实现阿里大鱼短信通知发送