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插件:

文件重命名:

fs.renamesync(files.upload.path, newpath); //重命名 

文件上传进度:

form.on('progress', function(bytesreceived, bytesexpected) {

}); 

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

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