首页 > 编程 > JavaScript > 正文

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

2019-11-19 16:12:56
字体:
来源:转载
供稿:网友

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

页面样式

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

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表