0.目標
在Express中實現(xiàn)單文件上傳。
1.部署Express
如果不知道如何部署，可參照： 部署Express
2.服務器端
這里要用到multer中間件，這個需要自行安裝：
npm install multer --save
在routes/index.js中引用multer，另外叶眉， 因為需要用到文件系統(tǒng)址儒，所以還要引用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 ) ) );
});
});
});
注意
在根目錄下創(chuàng)建一個文件夾喧伞，名稱是files。如果沒有先創(chuàng)建绩郎，上傳文件時會報錯潘鲫。
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.測試
運行服務肋杖，在瀏覽器里輸入：
瀏覽器中選擇一個文件上傳：
選擇上傳文件
上傳結果：
上傳文件的結果
服務端打痈嚷亍：
服務端打印
原創(chuàng)文章，未經(jīng)許可状植，請勿轉載
作者：Mike的讀書季
日期：2016.09.19
QQ：1139904786
Blog：http://blog.csdn.net/kkdestiny
