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学习小结(一)
Jul 06 NodeJs
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
Jul 15 NodeJs
轻松创建nodejs服务器(5):事件处理程序
Dec 18 NodeJs
iPhone手机上搭建nodejs服务器步骤方法
Jul 06 NodeJs
Nodejs Stream 数据流使用手册
Apr 17 NodeJs
深入理解nodejs中Express的中间件
May 19 NodeJs
基于nodejs 的多页面爬虫实例代码
May 31 NodeJs
详解NODEJS的http实现
Jan 04 NodeJs
nodejs中方法和模块用法示例
Dec 24 NodeJs
Nodejs监听日志文件的变化的过程解析
Aug 04 NodeJs
Nodejs中使用puppeteer控制浏览器中视频播放功能
Aug 26 NodeJs
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
May 30 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
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
php关联数组快速排序的方法
2015/04/17 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
Python2.x与Python3.x的区别
2016/01/14 Python
python 网络编程常用代码段
2016/08/28 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
毕业生求职简历的自我评价
2013/10/23 职场文书
员工培训心得体会
2013/12/30 职场文书
晚宴邀请函范文
2014/01/15 职场文书
员工安全生产承诺书
2014/05/22 职场文书
2015选调生工作总结
2015/07/24 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
python的变量和简单数字类型详解
2021/09/15 Python
python装饰器代码解析
2022/03/23 Python