網(wǎng)站建設(shè)常用代碼營(yíng)銷(xiāo)策劃36計(jì)
express框架，在上傳圖片功能方面，用formidable里面的incomingform功能，很方便。很多功能都已經(jīng)封裝好了，非常好用，簡(jiǎn)單，不需要寫(xiě)更深層次的代碼了。確實(shí)不錯(cuò)。
下面是我自己跟著黑馬教程的博客系統(tǒng)的部分，自己寫(xiě)的上傳文件的過(guò)程。記錄一下。
express框架里面，
app.js
var createError = require("http-errors");
var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");var indexRouter = require("./routes/index");
var usersRouter = require("./routes/users");var app = express();// view engine setup
app.set("views", path.join(__dirname, "views"));
app.engine("art", require("express-art-template"));
app.engine("html", require("express-art-template"));
app.set("view engine", "art");
// app.engine("ar", fn)app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));app.use("/", indexRouter);
app.use("/users", usersRouter);// catch 404 and forward to error handler
// app.use(function (req, res, next) {
// next(createError(404));
// });// error handler
// app.use(function (err, req, res, next) {
// // set locals, only providing error in development
// res.locals.message = err.message;
// res.locals.error = req.app.get("env") === "development" ? err : {};// // render the error page
// res.status(err.status || 500);
// // res.render("error");
// // console.log("errors::::");
// // next();
// });// app.get("/upload", require("./routes/upImg"));
app.get("/upload", function (req, res) {res.render("index.html");
});app.post("/upload", require("./routes/upload"));app.listen(3000, function () {console.log("server 3000");
});
// module.exports = app;這里我直接使用的是art模板，比較喜歡art，ejs模板里面的尖括號(hào)，實(shí)在有點(diǎn)反人類(lèi)，感覺(jué)尖括號(hào)闊的人都暈了，還是art更加簡(jiǎn)潔。另外把一些報(bào)錯(cuò)的信息直接給屏蔽掉了，error有的話(huà)不再渲染error，直接打印出來(lái)，可以更方面調(diào)試。
index頁(yè)面直接就是上傳文件和填寫(xiě)表單的頁(yè)面，因此，直接在index的路由里面，不用管，
接受上傳的頁(yè)面是upload，寫(xiě)在app.js里面了，后面可以封裝起來(lái)， 不過(guò)upload本來(lái)就是封裝的。
upload文件
upload.js
const formidable = require("formidable");
const path = require("path");module.exports = (req, res) => {const form = new formidable.IncomingForm();form.uploadDir = path.join(__dirname, "../", "public", "uploads");// console.log(form.uploadDir);//3.保留文件的后綴form.keepExtensions = true;// console.log(form);//4.解析表單form.parse(req, (err, fields, files) => {// 1. err是錯(cuò)誤對(duì)象，如果保存失敗，存儲(chǔ)蜈信息。/// 2.fields 對(duì)象類(lèi)型// 3. files 對(duì)象類(lèi)型，保存了和上傳文件相關(guān)的數(shù)據(jù).// 4.console.log("**************");console.log(files.cover.originalFilename,"\n",files.cover.newFilename);extName = files.cover.originalFilename.split(".")[1];console.log(extName);// xx =// res.send();res.send(files);});// res.send("ok");
};formidable 模塊的incomingForm對(duì)象可以接受內(nèi)容包括文字、圖片等，當(dāng)然其他的不知道能不能接受。
另外設(shè)置了上傳文件的額地址是在public下面的uploads
form.parse，可以解析整個(gè)req，拿出req里form表單的內(nèi)容。表單控件里，可以是input的text，也可以是input的 file
index文件如下：
index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="/stylesheets/bootstrap.min.css"><script src="/javascripts/jquery.min.js"></script><script src="/javascripts/bootstrap.min.js"></script><style>.form-control {width: 50%;}label {padding: 10px;}</style>
</head><body><h1>hello{{ title }}</h1><form action="/upload" class="form-container" method="post" enctype="multipart/form-data"><div class="form-group"><label for="">標(biāo)題</label><input type="text" name="title" class="form-control"></div><div class="form-group"><label for="">作者</label><input type="text" name="author" class="form-control"></div><div class="form-group"><label for="">圖片</label><input type="file" name="cover" id="file"><div class="thumbnail-waper"><img src="" alt="" class="img-thumbnail" id="preview" style="width: 400px; height: auto"></div></div><div class="form-group"><label for="">內(nèi)容</label><textarea name="content" id="content" cols="30" rows="10" class="form-control"></textarea></div><div class="buttons"><input type="submit" class="btn btn-primary"></div></form><script>//選擇文件上傳空間var file = document.querySelector("#file");var preview = document.querySelector("#preview")//當(dāng)用戶(hù)選擇完文件之后file.onchange = function() {var reader = new FileReader();//代表用戶(hù)選擇的文件列表// console.log(this.files[0]);//2.讀取文件reader.readAsDataURL(this.files[0])// 3. 監(jiān)聽(tīng) onload事件reader.onload = function() {console.log(reader.result);preview.src = reader.result}}</script></body></html>里面就一個(gè)大的form，其實(shí)不復(fù)雜。
下面，在body上方，插入一段js，主要兩個(gè)工作，1.接收上傳的圖片，2.當(dāng)圖片上傳完之后，渲染出圖片。還是很不錯(cuò)的。
如下圖：
?
?今天搞了一天，也算是把express的文件部分弄明白了。感覺(jué)學(xué)習(xí)就是，黑馬的視頻還是很不錯(cuò)，反復(fù)看，做出來(lái)一個(gè)項(xiàng)目，然后再把項(xiàng)目里面的細(xì)節(jié)反復(fù)做幾遍，弄出自己的東西，整體之后，把各個(gè)小的知識(shí)點(diǎn)再鉆研透了。就OK了