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

2024-04-27 14:21:40

字体：大中小

来源：转载

供稿：网友

Nodejs学习笔记（八）--- Node.js + ExPRess 实现上传文件功能（felixge/node-formidable）

前言

　　前面讲了一个构建网站的示例，这次在此基础上再说说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.Vevb.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文件夹以供文件存放