基于nodejs+express(4.x+)实现文件上传功能
作者:bea
Nodejs是一个年轻的编程框架,充满了活力和无限激情,一直都在保持着快速更新。基于Nodejs的官方Web开发库Express也在同步发展着,每年升级一个大版本,甚至对框架底层都做了大手术。在Express4时,替换掉中件间库connect,而改用多个更细粒度的库来取代。带来的好处是明显地,这些中间件能更自由的更新和发布,不会受到Express发布周期的影响;但问题也是很的棘手,不兼容于之前的版本,升级就意味着要修改代码。 通过一段时间的查阅资料、摸索,我发现实现上传的方式
Nodejs是一个年轻的编程框架,充满了活力和无限激情,一直都在保持着快速更新。基于Nodejs的官方Web开发库Express也在同步发展着,每年升级一个大版本,甚至对框架底层都做了大手术。在Express4时,替换掉中件间库connect,而改用多个更细粒度的库来取代。带来的好处是明显地,这些中间件能更自由的更新和发布,不会受到Express发布周期的影响;但问题也是很的棘手,不兼容于之前的版本,升级就意味着要修改代码。
通过一段时间的查阅资料、摸索,我发现实现上传的方式有:1.express中间件multer模块(此效率最高,在express3.x原生支持,到了express4.x独立成一个模块了),2.connect-multiparty模块(但现在 官方不推荐 ),3.使用multiparty模块实现(此方法比较普遍),4.使用formidable插件实现(插件呢,就是简单易懂);
最简单的做法是通过“connect-multiparty”中间件实现上传。
通过在项目中npm install connect-multiparty进行安装。
用法:
var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();
app.post('/upload', multipartMiddleware, function(req, resp) {
console.log(req.body, req.files);
// don't forget to delete all req.files when done
});
上传后,上传的文件会在临时目录中生成一个临时文件,具体可将req.files打印出查看具体文件路径。
只要在注释的地方将临时文件移动并重命名到实际目录中即可完成上传功能。
简单。
官方地址:https://www.npmjs.com/package/connect-multiparty
但是官方不建议使用该中间件,建议直接使用“multiparty”,因为错误处理比较麻烦。
下面就用“multiparty”实现一个版本。
1.使用express(版本是4.11.x)创建一个项目,采用默认的jade作为模版引擎。
2.在项目目录中,通过npm install multiparty进行安装必要组件。
3.修改views/index.jade,如下做一个简单的用于文件上传的form。
extends layout
block content form(method='post', action='/file/uploading', enctype='multipart/form-data')
input(name='inputFile', type='file', multiple='mutiple')
input(name='btnUp', type='submit',value='上传')
4.修改routes/index.js,实现上传页面和上传响应的后台代码。
var express = require('express');
var router = express.Router();
var multiparty = require('multiparty');
var util = require('util');
var fs = require('fs');
/* 上传页面 */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
/* 上传*/
router.post('/file/uploading', function(req, res, next){
//生成multiparty对象,并配置上传目标路径
var form = new multiparty.Form({uploadDir: './public/files/'});
//上传完成后处理
form.parse(req, function(err, fields, files) {
var filesTmp = JSON.stringify(files,null,);
if(err){
console.log('parse error: ' + err);
} else {
console.log('parse files: ' + filesTmp);
var inputFile = files.inputFile[];
var uploadedPath = inputFile.path;
var dstPath = './public/files/' + inputFile.originalFilename;
//重命名为真实文件名
fs.rename(uploadedPath, dstPath, function(err) {
if(err){
console.log('rename error: ' + err);
} else {
console.log('rename ok');
}
});
}
res.writeHead(, {'content-type': 'text/plain;charset=utf-'});
res.write('received upload:
');
res.end(util.inspect({fields: fields, files: filesTmp}));
});
});
module.exports = router;
完成。基于nodejs+express(4.x+)实现文件上传功能就全部介绍完了,希望对大家学习nodejs express相关知识有所帮助。
有用 | 无用
通过一段时间的查阅资料、摸索,我发现实现上传的方式有:1.express中间件multer模块(此效率最高,在express3.x原生支持,到了express4.x独立成一个模块了),2.connect-multiparty模块(但现在 官方不推荐 ),3.使用multiparty模块实现(此方法比较普遍),4.使用formidable插件实现(插件呢,就是简单易懂);
最简单的做法是通过“connect-multiparty”中间件实现上传。
通过在项目中npm install connect-multiparty进行安装。
用法:
var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();
app.post('/upload', multipartMiddleware, function(req, resp) {
console.log(req.body, req.files);
// don't forget to delete all req.files when done
});
上传后,上传的文件会在临时目录中生成一个临时文件,具体可将req.files打印出查看具体文件路径。
只要在注释的地方将临时文件移动并重命名到实际目录中即可完成上传功能。
简单。
官方地址:https://www.npmjs.com/package/connect-multiparty
但是官方不建议使用该中间件,建议直接使用“multiparty”,因为错误处理比较麻烦。
下面就用“multiparty”实现一个版本。
1.使用express(版本是4.11.x)创建一个项目,采用默认的jade作为模版引擎。
2.在项目目录中,通过npm install multiparty进行安装必要组件。
3.修改views/index.jade,如下做一个简单的用于文件上传的form。
extends layout
block content form(method='post', action='/file/uploading', enctype='multipart/form-data')
input(name='inputFile', type='file', multiple='mutiple')
input(name='btnUp', type='submit',value='上传')
4.修改routes/index.js,实现上传页面和上传响应的后台代码。
var express = require('express');
var router = express.Router();
var multiparty = require('multiparty');
var util = require('util');
var fs = require('fs');
/* 上传页面 */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
/* 上传*/
router.post('/file/uploading', function(req, res, next){
//生成multiparty对象,并配置上传目标路径
var form = new multiparty.Form({uploadDir: './public/files/'});
//上传完成后处理
form.parse(req, function(err, fields, files) {
var filesTmp = JSON.stringify(files,null,);
if(err){
console.log('parse error: ' + err);
} else {
console.log('parse files: ' + filesTmp);
var inputFile = files.inputFile[];
var uploadedPath = inputFile.path;
var dstPath = './public/files/' + inputFile.originalFilename;
//重命名为真实文件名
fs.rename(uploadedPath, dstPath, function(err) {
if(err){
console.log('rename error: ' + err);
} else {
console.log('rename ok');
}
});
}
res.writeHead(, {'content-type': 'text/plain;charset=utf-'});
res.write('received upload:
');
res.end(util.inspect({fields: fields, files: filesTmp}));
});
});
module.exports = router;
完成。基于nodejs+express(4.x+)实现文件上传功能就全部介绍完了,希望对大家学习nodejs express相关知识有所帮助。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 全面解析Bootstrap表单使用方法(表单控件)
- 全面解析Bootstrap表单使用方法(表单样式)
- 基于JavaScript实现Json数据根据某个字段进行排序
- jquery彩色投票进度条简单实例演示
- js生成随机数的过程解析
- jquery制作图片时钟特效
- jQuery实现Tab选项卡切换效果简单演示
- JS鼠标拖拽实例分析
- 基于jQuery实现简单的折叠菜单效果
- jquery无限级联下拉菜单简单实例演示
- jquery实现图片放大镜功能
- jquery自定义表格样式
- jquery实现表单验证简单实例演示
- JavaScript与HTML的结合方法详解
- js实现接收表单的值并将值拼在表单action后面的方法
- 跟我学习javascript的垃圾回收机制与内存管理
- 跟我学习javascript解决异步编程异常方案
- jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
- Bootstrap每天必学之表单