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 sublime text 3安装与配置
Jun 19 NodeJs
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
Sep 26 NodeJs
NodeJS中利用Promise来封装异步函数
Feb 25 NodeJs
快速掌握Node.js之Window下配置NodeJs环境
Mar 21 NodeJs
nodeJs爬虫获取数据简单实现代码
Mar 29 NodeJs
Nodejs+Socket.io实现通讯实例代码
Feb 13 NodeJs
NodeJS仿WebApi路由示例
Feb 28 NodeJs
实例分析nodejs模块xml2js解析xml过程中遇到的坑
Mar 18 NodeJs
windows系统下更新nodejs版本的方案
Nov 24 NodeJs
nodejs基于WS模块实现WebSocket聊天功能的方法
Jan 12 NodeJs
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
Feb 06 NodeJs
Nodejs实现微信分账的示例代码
Jan 19 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中文字符串截取函数
2013/11/12 PHP
深入浅析php json 格式控制
2015/12/24 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
动态控制Table的js代码
2007/03/07 Javascript
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
js Function类型
2011/12/04 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
如何开发一个JQuery插件
2016/07/28 面试题
商场中秋节广播稿
2014/01/17 职场文书
大学生军训广播稿
2014/01/24 职场文书
岗位廉政承诺书
2014/03/27 职场文书
保密承诺书
2014/03/27 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB