脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → NodeJS 图片上传

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

 更新时间：2017年06月30日 14:54:11   作者：Fly_Elephant  
本篇文章主要介绍了NodeJS实现图片上传代码(Express) ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

页面样式

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Node的stream数据流你了解吗

    Node的stream数据流你了解吗

    这篇文章主要为大家详细介绍了Node的stream数据流，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-02-02
  • node.js中使用socket.io制作命名空间

    node.js中使用socket.io制作命名空间

    这篇文章主要介绍了node中使用socket.io制作命名空间,需要的朋友可以参考下
    2014-12-12
  • 如何利用node实现静态文件缓存详解

    如何利用node实现静态文件缓存详解

    HTTP 缓存机制作为 Web 应用性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系的基础环节,也是想要成为前端架构的必备技能,这篇文章主要给大家介绍了关于如何利用node实现静态文件缓存的相关资料,需要的朋友可以参考下
    2021-07-07
  • NodeJS实现客户端js加密

    NodeJS实现客户端js加密

    本文主要介绍了NodeJS实现客户端js加密的思路与方法，具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • node省市区三级数据性能测评实例分析

    node省市区三级数据性能测评实例分析

    这篇文章主要介绍了node省市区三级数据性能,结合具体实例形式评测分析了node省市区三级数据的实现、改进方法与运行效率,需要的朋友可以参考下
    2019-11-11
  • 浅谈Node.js：理解stream

    浅谈Node.js：理解stream

    本篇文章主要介绍了Node.js：stream，Stream在node.js中是一个抽象的接口，具有一定的参考价值，有需要的可以了解一下。
    2016-12-12
  • 详解从Node.js的child_process模块来学习父子进程之间的通信

    详解从Node.js的child_process模块来学习父子进程之间的通信

    这篇文章主要介绍了从Node.js的child_process模块来学习父子进程之间的通信，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • 利用yarn代替npm管理前端项目模块依赖的方法详解

    利用yarn代替npm管理前端项目模块依赖的方法详解

    这篇文章主要给大家介绍了关于利用yarn代替npm管理前端项目模块依赖的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-09-09
  • npm 工具库 yenv使用简介

    npm 工具库 yenv使用简介

    这篇文章主要为大家介绍了npm 工具库 yenv使用简介，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • NodeJs 模仿SIP话机注册的方法

    NodeJs 模仿SIP话机注册的方法

    这篇文章主要介绍了NodeJs 模仿SIP话机注册的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06

最新评论