目录

前言

  前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能----文件上传,示例以一个上传图片的功能为例子

  上传功能命名用formidable实现,示例很简单!

  PS:最近比较忙,距上一次更新已经比较久了^_^!

formidable简介

  nodejs原生实现上传还是比较麻烦,有兴趣的自已去参考一下网上有网友写的代码

  这里选择了formidable,也是github上同类功能模块人气比较高的

  https://github.com/felixge/node-formidable

  https://www.npmjs.org/package/formidable

  

  优点:上传速度比较可观,占用内存也比较低,简单易用...

创建项目安装formidable

   1.创建项目sampleUpload

cd 工作目录

express -e sampleUpload

  2.修改package.json文件,添加formidable依赖项

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "express": "~4.0.0",
    "static-favicon": "~1.0.0",
    "morgan": "~1.0.0",
    "cookie-parser": "~1.0.1",
    "body-parser": "~1.0.0",
    "debug": "~0.7.4",
    "ejs": "~0.8.5",
    "formidable" : "latest"
  }
}

  3.安装依赖项

cd sampleUpload && npm install

  

  安装成功,一切准备就绪,开始完成这个功能!

实现上传功能

  1.index.ejs文件中构建表单并实现前端验证(样式使用和http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 一致)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>

      <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/stylesheets/signin.css" />
  </head>

  <body>

    <div id="container" class="container">
       <% if (locals.success) { %>
          <div id="alt_sucess" class="alert alert-success">
            <%- success %>
          </div>
       <% } %> 

      <% if (locals.error) { %>
        <div id="alt_warning" class="alert alert-warning">
          <%= error %>
        </div>
      <% } %> 

      <form class="form-signin" role="form" method="post" enctype='multipart/form-data'>
        <h2 class="form-signin-heading">上传文件</h2>
        <input id="fulAvatar" name="fulAvatar" type="file" class="form-control" />
        <br/>
        <button id="btnSub" class="btn btn-lg btn-primary" type="submit">上 传</button>
      </form>

    </div>
  </body>
</html>

<script src="/javascripts/jquery-1.11.1.min.js" type="text/javascript"></script>

<script type="text/javascript">
     String.prototype.format = function (args) {
            var result = this;
            if (arguments.length > 0) {
                if (arguments.length == 1 && typeof (args) == "object") {
                    for (var key in args) {
                        if (args[key] != undefined) {
                            var reg = new RegExp("({" + key + "})", "g");
                            result = result.replace(reg, args[key]);
                        }
                    }
                }
                else {
                    for (var i = 0; i < arguments.length; i++) {
                        if (arguments[i] != undefined) {
                            var reg = new RegExp("({)" + i + "(})", "g");
                            result = result.replace(reg, arguments[i]);
                        }
                    }
                }
            }
            return result;
    }

    $(function(){
        $('#btnSub').on('click',function(){
            var fulAvatarVal = $('#fulAvatar').val(),
                errorTip = '<div id="errorTip" class="alert alert-warning">{0}</div> ';  

            $("#errorTip,#alt_warning").remove();

            if(fulAvatarVal.length == 0)
            {
                $("#container").prepend(errorTip.format('请选择要上传的文件'));
                return false;
            }

           var extName = fulAvatarVal.substring(fulAvatarVal.lastIndexOf('.'),fulAvatarVal.length).toLowerCase();

            if(extName != '.png' && extName != '.jpg'){
               $("#container").prepend(errorTip.format('只支持png和jpg格式图片'));
               return false;
            }

            return true;
        })
    });

</script>

  这里一定要注意表单的enctype属性,这个就不多作解释了,如果是初次接触,看看http://www.w3school.com.cn/tags/att_form_enctype.asp

  

  2.实现index.js中上传逻辑

var express = require('express')
    router = express.Router(),
    formidable = require('formidable'),
      fs = require('fs'),
      TITLE = 'formidable上传示例',
    AVATAR_UPLOAD_FOLDER = '/avatar/'

/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: TITLE });
});

router.post('/', function(req, res) {

  var form = new formidable.IncomingForm();   //创建上传表单
      form.encoding = 'utf-8';        //设置编辑
      form.uploadDir = 'public' + AVATAR_UPLOAD_FOLDER;     //设置上传目录
      form.keepExtensions = true;     //保留后缀
      form.maxFieldsSize = 2 * 1024 * 1024;   //文件大小

    form.parse(req, function(err, fields, files) {

        if (err) {
          res.locals.error = err;
          res.render('index', { title: TITLE });
          return;
        }  

        var extName = '';  //后缀名
        switch (files.fulAvatar.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.locals.error = '只支持png和jpg格式图片';
              res.render('index', { title: TITLE });
              return;
        }

        var avatarName = Math.random() + '.' + extName;
        var newPath = form.uploadDir + avatarName;

        console.log(newPath);
        fs.renameSync(files.fulAvatar.path, newPath);  //重命名
    });

    res.locals.success = '上传成功';
    res.render('index', { title: TITLE });
});

module.exports = router;

  

  注意:在public文件夹中创建avatar文件夹以供文件存放

运行结果

  1.在app.js中添加8000端口的监听

  2.cd到项目根目录,运行 node app

  3.浏览器上访问 localhost:8000

  

  4.上传图片

  
  5.去上传文件夹中查看

  

  大功告成!

部分疑惑解析

  有一些在代码中有注释的我就不解释了

  

  1.怎么没看到上传?

  注意:form.parse  再看看formidable的解释

Automatically writing file uploads to disk

  2.为什么需要fs.renameSync

  原因和上一个问题有关,它会自动被上传到用户的临时目录(这个可以把files.fulAvatar.path输出来看一下便知) http://nodejs.org/docs/latest/api/fs.html#fs_fs_renamesync_oldpath_newpath

  3.可不可以看到上传进度

  可以,https://github.com/felixge/node-formidable#events (仔细看看events,可能有你要用的其它部分)

  但是只是在控制台输出,想在前端去显示进度条是不行的(没有去研究,想想别的办法应该也可以)

  4.文件名想命名UUID不重复,在nodejs中怎么办?

  可以使用node-uuid,调用简单  https://github.com/broofa/node-uuid

  ...

  其它的留言问吧^_^!

写在之后

  功能比较简单,代码也是示例风格,大家主要关注一下使用

  代码结构优化方向:

  1.比如文件后缀这一类的方法可以放到一个pub.js中,此js专门用于这些公有方法

  2.可以利于返回值的方式去返回数据,前端根据返回值做出相应的提示

  3.可以利于jquery.form.js去提交表单,post中用res.json方法返回值,优化体验(同样引用这个js也会增大页面体积)

  ....

  总之是个小例子,大家将就着看看吧^_^!

Nodejs学习笔记(八)--- Node.js + Express 实现上传文件功能(felixge/node-formidable)的更多相关文章

  1. Nodejs学习笔记(八)—Node.js + Express 实现上传文件功能(felixge/node-formidable)

    前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能----文件上传,示例以一个上传图片的功能为例子 上传功能命名用formidable实现,示例很简单! PS:最近比较忙,距上一次 ...

  2. Web 在线文件管理器学习笔记与总结(19)上传文件

    dir.func.php 中添加方法: /* 上传文件 */ function uploadFile($fileInfo,$path,$allowExt = array('jpg','jpeg','p ...

  3. Android学习笔记_13_网络通信之多个上传文件

    一.获取HTTP协议: 建立一个Web项目,建立一个如下所示的jsp界面,用IE捕获表单提交信息. <%@ page language="java" contentType= ...

  4. js方法实现--上传文件功能

    function createUploadForm(fileElementId, data, curFileList) { var id = new Date().getTime(); var for ...

  5. js实现分段上传文件

    使用js实现分段上传文件,本文使用了FileReader对象,可参考:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader 1)获取文 ...

  6. Servlet学习:(三)Servlet3.0 上传文件

    转: Servlet学习:(三)Servlet3.0 上传文件 2018年08月03日 11:57:58 iDark_CSDN 阅读数:362   一.注意事项 客户端(浏览器) 表单的提交方法必须是 ...

  7. JS 异步分段上传文件

    为了解决大文件上传 (PHP上传最大限制2GB) 同时为了解决文件上传是对服务器造成的压力 可以通过分段上传解决这个问题,这得益于HTML5开发的file API 前台代码: 引用了进度条插件myPr ...

  8. c#+js 使用formdata上传文件

    如果不是使用form表单submit的形式,我们可以手动通过formdata传值(针对文件上传等) 比如: <html> <head> <meta name=" ...

  9. Nodejs学习笔记(五)--- Express安装入门与模版引擎ejs

    目录 前言 Express简介和安装 运行第一个基于express框架的Web 模版引擎 ejs express项目结构 express项目分析 app.set(name,value) app.use ...

随机推荐

  1. Java守护线程

    最近的项目使用的是dubbo.Web工程发布在Tomcat上,会作为消费者调用其他的dubbo微服务.但是最近发现一个问题,在使用shutdown命令关闭tomcat的时候,Tomcat并没有真正关闭 ...

  2. MySQL 相关总结

    MySQL 优秀在线教程 RUNOOB-SQL 教程 MySQL 常用命令 导出操作 -- 某数据库 全部表 结构和数据 mysqldump -h192.168.8.152 -uroot -p man ...

  3. jsp文件引入js文件的方式(项目部署于web容器中)

    在页面中引入javascript文件的方式是多种多样的,本文介绍两种. 通过<script>标签插入js文件 通过这种方式引入的js,写对js文件和jsp文件的路径很重要.下面给出一个项目 ...

  4. Linux下WebSphereV8.5.5.0 安装详细过程

    自WAS8以后安装包不再区别OS,一份介质可以安装到多个平台.只针对Installation Manager 进行了操作系统的区分 ,Websphere产品介质必须通过专门的工具Install Man ...

  5. 用maven搭建 testNG+PowerMock+Mockito测试框架

    单元测试是开发中必不可少的一部分,是产品代码的重要保证. Junit和testNG是当前最流行的测试框架,Junit是使用最广泛的测试框架,有兴趣的话自己baidu一下. testNG基于Junit和 ...

  6. DOCTYPE 中xhtml 1.0和 html 4.01区别分析

    前者相对于后者有以下特性: 1.所有的标记都都要闭合 所有的标记都要闭合,如果是单独不成对的标签,在标签最后加一个"/"来关闭它.例如: <h6>close tag & ...

  7. C语言浮点数除法可以精确到多少位小数

    double型的两个数相除,得到的浮点数能精确到多少位呢..用我家电脑做了个实验,编译器是Code::Blocks 13.12. 然后用电脑自带的计算器算的结果和C语言算的结果比较如图. 第一例里a= ...

  8. Thrift框架使用C++的一个demo

    Thrift编译器会根据选择的目标语言为server产生服务接口代码,为client产生stubs,参数可以是基本类型和结构体. 代码框架用的Thrift,为了了解结构,学习写了一个thrift的De ...

  9. Pocket Gems面经prepare: Diamond and Ruby

    说我有一个背包,有n个格子,一个格子可以放5个钻石,一个钻石10块钱,一个格子可以放5个ruby,一个ruby 5块钱, 一个格子可以放一个装备,一个装备25块钱. 然后给你n个钻石n个ruby n个 ...

  10. vs2010打不开vs2017的.sln文件,出现错误提示 “选择的文件是解决方案文件 但是用此应用程序的较新版本创建的,无法打开”

    解决方案: 1.复制下面这段语句 Microsoft Visual Studio Solution File, Format Version 11.00 # Visual Studio 2010 2. ...