nodejs 上傳檔案
阿新 • • 發佈：2018-11-02
1、html程式碼
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="../../public/js/jquery.min.js"></script> <script src="../../public/js/hb_common.js"></script> <link rel="stylesheet" href="../../public/css/bootstrap.min.css"> <link rel="stylesheet" href="../../public/css/hb_wap.css"> <title>nodejs上傳檔案測試</title> </head> <body > <form action="upload" method="post" enctype ="multipart/form-data"> <input type="file" name="myfile" /> <button><%=btn_name%></button> </form> </body> </html>
效果圖
2、控制器
檔案上傳使用的是“multiparty”模組，需要使用npm引入multiparty模組
npm install multiparty –-save-devvar express = require('express'); var router = express.Router(); var fs = require('fs'); //"path"模組提供了生成上傳檔案塊的檔名的方法。 var path = require('path'); var util = require('util'); //使用multiparty模組，也是必須要使用"multipart/form-data"型別 var multiparty = require('multiparty'); /** * sqh 模組index * */ router.get('/', function(req, res, next) { //res.render('sqh/addGoods', { name: 'Express 路由1' }); //res.writeHead(200, { "Content-Type": "text/plain" }); //res.end("Welcome to the about!\n"); res.render("sqh/index",{ btn_name:"測試submit提交到指定的action" }); }); /** * 新增商品 * */ router.get('/addGoods', function(req, res, next) { res.render('sqh/addGoods', { name: 'Express 路由1' }); }); /** * 新增商品 * */ router.post('/upload', function(req, res, next) { // 解析一個檔案上傳 var form = new multiparty.Form(); //設定編輯 form.encoding = 'utf-8'; //設定檔案儲存路徑 form.uploadDir = "uploadfile"; //設定單檔案大小限制 form.maxFilesSize = 20 * 1024 * 1024; //form.maxFields = 1000; 設定所以檔案的大小總和 form.parse(req, function(err, fields, files) { var originalFilename = files.myfile[0].originalFilename; var path = files.myfile[0].path; console.log(originalFilename); console.log(path); //同步重新命名檔名 fs.renameSync(path, originalFilename); res.writeHead(200, {'content-type': 'text/plain'}); res.write('received upload:\n\n'); res.end(util.inspect({fields: fields, files: files})); }); }); module.exports = router;
3、啟動web應用app.js
var express = require("express"); var http = require("http"); var app = express(); ////////////////////// 獲取post過來的資料 ///////////////////////////// var bodyParser = require("body-parser"); app.use(bodyParser.urlencoded({ extended: false })); ////////////////////// 設定模板 ///////////////////////////// var ejs = require("ejs"); //使用set方法，為系統變數“views”和“view engine”指定值。 app.set("views", __dirname + "/views"); // 指定模板檔案的字尾名為html app.set('view engine', 'html'); // 執行hbs模組 app.engine('html', ejs.__express); ////////////////////// 利用檔案來拆分路由的規模 ///////////////////////////// var router = express.Router(); var sqhIndex = require('./routes/sqh/sqhIndex'); //設定web工程的根目錄 app.use(express.static(__dirname + '/')); app.use('/sqh', sqhIndex); http.createServer(app).listen(3000);
目錄結構圖
