NodeJs实现图片上传

关于formidable

NodeJs实现图片上传，此处主要用了插件：formidable

github上关于formidable的资料如下：

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

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

创建项目安装formidable

1,创建项目sampleUpload

cd 工作目录
express -e sampleUpload

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

{
"name": "sampleUpload",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"ejs": "~2.3.3",
"express": "~4.13.1",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0",
"formidable":"latest"
}
}

3,安装依赖项

cd sampleUpload && npm install

安装成功，开始完成这个功能，文件目录如下图：

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 = '';  //后缀名
console.log("files.fulAvatar.type="+files.fulAvatar.type);
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;

index.js
注意：在public文件夹中创建avatar文件夹以供文件存放

运行结果：



在项目中遇到的问题：

由于在html中代码写成：

<input id="fulAvatar" name="fulAvater" type="file" class="form-control" /><br/>

而在index.js中部分代码如下：

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

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

var extName = '';  //后缀名
console.log("files.fulAvatar.type="+files.fulAvatar.type);
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 });

运行之后总是报以下异常：



虽然报异常，但是上传图片确是成功的，界面显示上传成功。

原因是因为：

虽然form.parse方法中有异常，但是它是异步的，不妨碍以下代码的执行：

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

上传成功是因为：

只要调用了form.parse方法就可以上传成功。

最终找到原因是因为html中上传控件的name值为：

<input id="fulAvatar" name="fulAvater" type="file" class="form-control" /><br/>

与index.js中的files.fulAuatar不一致导致的。

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;
}

把index.html中代码为以下即可：

<input id="fulAvatar" name="fulAvatar" type="file" class="form-control" /><br/>

具体参考：
http://www.cnblogs.com/zhongweiv/p/nodejs_express_formidable.html#node_web_install