Node.js + Express 实现上传文件功能（felixge/node-formidable）

来源：互联网发布：儿童摄影网络推广编辑：程序博客网时间：2024/04/28 11:41

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

时间 2014-07-11 17:46:00 博客园-原创精华区

原文 http://www.cnblogs.com/zhongweiv/p/nodejs_express_formidable.html

主题 Node.js

前言

前面讲了一个构建网站的示例，这次在此基础上再说说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;