一论笔、靜態(tài)頁面:
<body>
<h1>單上傳文件</h1>
<form action="/uploadFile.do" method="post" enctype="multipart/form-data">
<input type="file" name="myFile">
<button>上傳</button>
</form>
<h1>多文件上傳</h1>
<form action="/uploadFiles.do" method="post" enctype="multipart/form-data">
<input type="file" name="myFiles" multiple="multiple">
<button>多文件上傳</button>
</form>
</body>
二采郎、在app.js里搭建服務器并配置,設置并監(jiān)聽端口
//========================搭建服務器并配置=================
const express=require("express");//加載express 資源
const logger=require("morgan");//日志模塊
const app=express();//執(zhí)行express 全局函數(shù)狂魔,返回一個express服務器對象
const path=require("path");
//引入自己的路由模塊
const route=require("./routes/indexRouter");
// 引入處理post數(shù)據的模塊
const bodyParser = require("body-parser");
//---express 配置
//2.日志模塊:記錄每次請求信息蒜埋,并在調試臺看到
app.use(logger("dev"));//調用日志,配置為dev模式
//使用處理post請求的模塊
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());
// 使用自己定義的路由模塊
app.use(route);
//1.設置靜態(tài)資源路徑
app.use(express.static(__dirname+"/public"));//__dirname 指向當前文件的根目錄
app.set("port",9999);//設置端口
app.listen(9999,()=>{
console.log("服務器已啟動"+app.get("port"));
});
三最楷、配置模塊
1整份、在config文件夾里新建一個dbpoolconfig.js(文件名自定義)頁面建立數(shù)據庫連接池
需要下載mysql模塊:npm install mysql --save
const mysql=require("mysql");
const dbpool={
pool:{},
config:{// 創(chuàng)建連接池需要用到的參數(shù)
host:"localhost",//主機地址
port:"3306",//端口
user:"root",//用戶名
password:"root",//密碼
database:"studentsystem"http:// 數(shù)據庫名稱
},
create(){
// console.log("創(chuàng)建連接池");
this.pool=mysql.createPool(this.config)// 創(chuàng)建連接池
},
connect(sql,arr,fn){
this.pool.getConnection((err,connection)=>{
/*發(fā)起query數(shù)據庫語局
* 1.SQL語局句
* 2.sql參數(shù)
* 3.回調函數(shù),執(zhí)行完sql語句后調用籽孙,把結果注入在回調函數(shù)的參數(shù)里面烈评,做出響應*/
connection.query(sql,arr,fn);
// 釋放連接
connection.release();
})
}
};
dbpool.create();
//公開配置
module.exports=dbpool;
2、在config文件夾里新建一個uploadconfig.js(文件名自定義)頁面配置 文件上傳模塊
需要下載multer模塊:npm install multer --save
const multer=require("multer"); // 引入multer模塊
//文件上傳模塊的配置
const storage=multer.diskStorage({
destination:function (req,file,cb) {
console.log(file);
cb(null,"./public/uploads");// 保存上傳的文件的路勁
},
filename:function (req,file,cb) {
// console.log(file);
let fileFormat=(file.originalname).split(".");
// 保存上傳的文件的名稱
cb(null,fileFormat[0]+"-"+Date.now()+"."+fileFormat[fileFormat.length-1]);
}
});
//將配置匹配給multer對象
const upload=multer({
storage:storage
});
//公開配置
module.exports=upload;
四犯建、路由模塊routes文件下indexRouter.js(文件名自定義)
const express=require("express");
const path=require("path");
// 引入路由模塊
const uploadController=require("../controller/uploadController");
// 調用express對象的路由方法來獲取路由對象
const router=express.Router();
// 引入處理文件上傳的模塊
const upload=require("../config/uploadconfig");
//=======================路由攔截=============================
// 單文件上傳
router.post("/uploadFile.do",upload.single("myFile"),uploadController.uploadFile);
// 多文件上傳
router.post("/uploadFiles.do",upload.array("myFiles"),uploadController.uploadFiles);
// 公開路由模塊
module.exports=router;
五讲冠、controller控制層:uploadController.js(文件名自定義)
const dbpool=require("../config/dbpoolconfig"); // 引入連接池配置文件
const fileController={
uploadFile(req,resp){// 單文件上傳
// console.log(req.file.filename);
let pathname="uploads/"+req.file.filename;// 路徑名
let fileName=(req.file.originalname).split(".")[0]; // 文件名
dbpool.connect("insert into t_url values (?,?,?)", // mysql語句,存入數(shù)據庫
[null,fileName,pathname],// 數(shù)據庫中t_url表格有三列适瓦,第一列為自增竿开,所以寫null
(err,data)=>{
if(!err){
resp.send("上傳成功!");
}
})
},
uploadFiles(req,resp){// 多文件上傳
console.log(req);
for(let i = 0; i < req.files.length; i ++) {
let pathname = "uploads/" + req.files[i].filename;// 路徑名
let fileName = (req.files[i].originalname).split(".")[0];// 文件名
dbpool.connect("insert into t_url values (?,?,?)", // mysql語句玻熙,存入數(shù)據庫
[null, fileName, pathname],// 數(shù)據庫中t_url表格有三列否彩,第一列為自增,所以寫null
(err, data) => {
console.log(data);
// console.log(err);
if (!err) {
if (i==req.files.length-1){
resp.send("上傳成功嗦随!");
}
}
})
}
}
};
module.exports=fileController;