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


Posted in NodeJs onJune 30, 2017

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

页面样式

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

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

上传图片样式:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
Nov 18 NodeJs
NodeJs的优势和适合开发的程序
Aug 14 NodeJs
NodeJS远程代码执行
Aug 28 NodeJs
nodejs后台集成ueditor富文本编辑器的实例
Jul 11 NodeJs
NodeJS爬虫实例之糗事百科
Dec 14 NodeJs
详解nodeJs文件系统(fs)与流(stream)
Jan 24 NodeJs
nodejs连接mysql数据库及基本知识点详解
Mar 20 NodeJs
Nodejs异步回调之异常处理实例分析
Jun 22 NodeJs
nodejs之koa2请求示例(GET,POST)
Aug 07 NodeJs
nodejs同步调用获取mysql数据时遇到的大坑
Mar 02 NodeJs
NodeJS 文件夹拷贝以及删除功能
Sep 03 NodeJs
如何利用nodejs实现命令行游戏
Nov 24 NodeJs
详解nodejs实现本地上传图片并预览功能(express4.0+)
Jun 28 #NodeJs
NodeJS链接MySql数据库的操作方法
Jun 27 #NodeJs
NodeJS自定义模块写法(详解)
Jun 27 #NodeJs
docker中编译nodejs并使用nginx启动
Jun 23 #NodeJs
NodeJs中express框架的send()方法简介
Jun 20 #NodeJs
深入浅析Nodejs的Http模块
Jun 20 #NodeJs
Nodejs实现多房间简易聊天室功能
Jun 20 #NodeJs
You might like
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
jquery json 实例代码
2010/12/02 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
python读取与写入csv格式文件的示例代码
2017/12/16 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
python 接口返回的json字符串实例
2018/03/27 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
毕业生学校推荐信范文
2014/05/21 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
护士年终考核评语
2014/12/31 职场文书
推普标语口号大全
2015/12/26 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
高质量“欢迎词”
2019/04/03 职场文书
Python中文纠错的简单实现
2021/07/07 Python
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js