NodeJS实现图片上传代码(Express)

文件上传是每个网站不可避免的，最近需要做些上传图片的功能，主要解决两个问题，一个

文件上传是每个网站不可避免的，最近需要做些上传图片的功能，主要解决两个问题，一个是文件上传样式和服务端路径保存，功能很简单，做起来倒是没那么简单，先从最简单的页面的上传页面的样式开始。

页面样式

Html页面默认的上传的是比较难看的，需要重做一个背景图片，通过背景图片添加上传的图片:

上传图片样式:

<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/';<br>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还有很多设置的选项，本文根据需求设置了几项，有额外需求的可以参考官方地址~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。