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

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

页面样式

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

上传图片样式:

rush:xhtml;">

CSS样式:

rush: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实现:

rush:js;"> $('.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',$('#fil<a href="https://www.jb51.cc/tag/eto/" target="_blank" class="keywords">eto</a>Upload')[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安装地址:

rush:js;"> npm install formidable@latest

上传图片

rush:js;"> 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.mkd<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>ync(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: '只<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>png和jpg格式<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>'

  });

  return;

} else {

  var avatarName = '/' + Date.<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>() + '.' + extName;

  var newPath = form.uploadDir + avatarName;

  <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>playUrl = UPLOAD_FOLDER + currentUser.id + avatarName;

  fs.renameSync(files.upload.path,newPath); //<a href="https://www.jb51.cc/tag/zhongmingming/" target="_blank" class="keywords">重命名</a>

  res.send({

    code: 200,msg: <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>playUrl

  });

}

});

};

不同用户上传置放在不同的位置，根据需求来设置，当然也有可以每张图片都给不同的id编号，推荐第三方uuid插件:https://github.com/broofa/node-uuid

文件重命名:

rush:js;"> fs.renameSync(files.upload.path,newPath); //重命名

文件上传进度:

rush:js;"> form.on('progress',function(bytesReceived,bytesExpected) {

});

node-formidable有很多官方API还有很多设置的选项，本文根据需求设置了几项，有额外需求的可以参考官方地址~

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