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实现多人同时在线移动鼠标的小游戏分享
Dec 06 NodeJs
Nodejs学习笔记之测试驱动
Apr 16 NodeJs
nodejs调用cmd命令实现复制目录
May 04 NodeJs
nodejs简单实现中英文翻译
May 04 NodeJs
nodeJS实现简单网页爬虫功能的实例(分享)
Jun 08 NodeJs
详解nodejs的express如何自动生成项目框架
Jul 12 NodeJs
nodejs操作mongodb的增删改查功能实例
Nov 09 NodeJs
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
Jan 05 NodeJs
通过nodejs 服务器读取HTML文件渲染到页面的方法
May 17 NodeJs
nodejs 使用 js 模块的方法实例详解
Dec 04 NodeJs
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
Feb 02 NodeJs
Sublime Text3 配置 NodeJs 环境的方法
May 20 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
php简单实现快速排序的方法
2015/04/04 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
详解JS模块导入导出
2017/12/20 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
详解python之简单主机批量管理工具
2017/01/27 Python
python如何统计序列中元素
2020/07/31 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
Python 多进程、多线程效率对比
2020/11/19 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
linux面试题参考答案(5)
2014/09/01 面试题
暑期实践思想汇报
2014/01/06 职场文书
教师党员思想汇报
2014/01/06 职场文书
五一手机促销方案
2014/03/08 职场文书
西式结婚主持词
2014/03/14 职场文书
教师党员一句话承诺
2014/03/28 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
领导班子整改方案
2014/10/25 职场文书
放假通知
2015/04/14 职场文书
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS