0.目标
在Express中实现单文件上传。
1.部署Express
如果不知道如何部署,可参照: 部署Express
2.服务器端
这里要用到multer中间件,这个需要自行安装:
npm install multer --save
在routes/index.js中引用multer,另外, 因为需要用到文件系统,所以还要引用fs模块:
var multer = require('multer');
var fs = require("fs");
增加一个路由,用来显示页面:
/* 浏览器输入地址(如127.0.0.1:3000/upload)后,显示views/upload页面,此页面使用默认引擎(这里是jade)渲染 */
router.get('/upload', function(req, res, next) {
res.render('upload', {msg: "请先上传"});
});
增加一个路由,用来处理上传操作:
var upload = multer({ dest: '/tmp/' })
router.post('/file_upload', upload.array('image'), function(req, res, next) {
console.log(req.files[0]); // 上传的文件信息
if(undefined == req.files[0])
{
res.end( JSON.stringify( {message:"文件不存在!"} ) );
}
var response = {};
var des_file = "./files/" + req.files[0].originalname;
fs.readFile( req.files[0].path, function (err, data) {
fs.writeFile(des_file, data, function (err) {
if( err ){
console.log( err );
response = {
message:'File uploaded failed',
filename:err
};
}else{
response = {
message:'File uploaded successfully',
filename:req.files[0].originalname
};
}
console.log( response );
res.end( JSON.stringify( JSON.stringify( response ) ) );
});
});
});
注意
在根目录下创建一个文件夹,名称是files。如果没有先创建,上传文件时会报错。
3.客户端页面
在views文件夹下,添加一个文件upload.jade
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
h1 Express的文件上传
h3 选择一个文件上传
form(action="/file_upload" method="post" enctype="multipart/form-data")
input(type="file" name="image" size="50")
input(type="submit" value="上传文件")
h3 消息:#{msg}
4.测试
运行服务,在浏览器里输入:
浏览器中选择一个文件上传:
上传结果:
服务端打印:
原创文章,未经许可,请勿转载
作者:Mike的读书季
日期:2016.09.19
QQ:1139904786
Blog:http://blog.csdn.net/kkdestiny