一、 Multer 模塊介紹

Multer 是一個 node.js 中間件，用于處理 multipart/form-data 類型的表單數據，它主要用 于上傳文件。
它是寫在 busboy 之上非常高效。
注意: Multer 不會處理任何非 multipart/form-data 類型的表單數據。
https://www.npmjs.com/package/multer

二、 Express 上傳文件模塊 multer 的使用

安裝 multer npm install --save multer

引入配置 multer 模塊 ：

var multer = require('multer') //配置 var storage = multer.diskStorage({ //文件保存路徑 注意路徑必須存在destination: function (req, file, cb) { cb(null, 'public/upload/') },//修改文件名稱 filename: function (req, file, cb) { var fileFormat = (file.originalname).split("."); cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]); } }) var upload = multer({ storage: storage })

使用 multer

router.post('/doAdd', upload.single("pic"), function (req, res) { res.send({ file: req.file,//返回文件名 body: req.body }) });

第一種使用方式：無法指定上傳文件的后綴名

第二種：可以指定文件的后綴名

const express = require("express") var multer = require('multer') const path = require('path') // var upload = multer({ dest: 'static/upload' }) // 上傳文件之前目錄必須存在 var storage = multer.diskStorage({// 配置上傳的文件保存的目錄destination: function (req, file, cb) {cb(null, 'static/upload')},// 修改上傳的文件的文件名filename: function (req, file, cb) {// 1.獲取后綴名let extname = path.extname(file.originalname)// 2.根據時間戳生成文件名cb(null, Date.now()+ "." + extname)}}) var upload = multer({ storage: storage }) var router = express.Router() router.get("/",(req, res)=> {res.send("導航列表") }) router.get("/add",(req, res)=> {res.render("admin/nav/add.html") }) router.post("/doAdd", upload.single("pic") ,(req, res)=> {// 獲取表單傳過來的數據var body = req.body;console.log(body)console.log(req.file)res.send({body: req.body,file: req.file}) })router.get("/edit",(req, res)=> {res.send("修改導航") })router.post("/doEdit",(req, res)=> {res.send("執行修改導航") })module.exports = router

tool.js :

var multer = require('multer') const path = require('path')let tools = {multer() {// var upload = multer({ dest: 'static/upload' }) // 上傳文件之前目錄必須存在var storage = multer.diskStorage({// 配置上傳的文件保存的目錄destination: function (req, file, cb) {cb(null, 'static/upload')},// 修改上傳的文件的文件名filename: function (req, file, cb) {// 1.獲取后綴名let extname = path.extname(file.originalname)// 2.根據時間戳生成文件名cb(null, Date.now() + "." + extname)}})var upload = multer({ storage: storage })return upload} }module.exports = tools

nav.js:

const express = require("express") const tool = require("../../model/tool")var router = express.Router() router.get("/",(req, res)=> {res.send("導航列表") }) router.get("/add",(req, res)=> {res.render("admin/nav/add.html") }) router.post("/doAdd", tool.multer().single("pic") ,(req, res)=> {// 獲取表單傳過來的數據var body = req.body;console.log(body)console.log(req.file)res.send({body: req.body,file: req.file}) }) // var multer = require('multer') // const path = require('path') // // var upload = multer({ dest: 'static/upload' }) // // 上傳文件之前目錄必須存在 // var storage = multer.diskStorage({ // // 配置上傳的文件保存的目錄 // destination: function (req, file, cb) { // cb(null, 'static/upload') // }, // // 修改上傳的文件的文件名 // filename: function (req, file, cb) { // // 1.獲取后綴名 // let extname = path.extname(file.originalname)// // 2.根據時間戳生成文件名 // cb(null, Date.now()+ "." + extname) // } // }) // var upload = multer({ storage: storage })// router.post("/doAdd", upload.single("pic") ,(req, res)=> { // // 獲取表單傳過來的數據 // var body = req.body; // console.log(body) // console.log(req.file) // res.send({ // body: req.body, // file: req.file // }) // })router.get("/edit",(req, res)=> {res.send("修改導航") })router.post("/doEdit",(req, res)=> {res.send("執行修改導航") })module.exports = router

三、 Express 按照日期生成上傳文件目錄

tool.js:

var multer = require('multer') const path = require('path') const sd = require('silly-datetime') const mkdirp = require('mkdirp')let tools = {multer() {// var upload = multer({ dest: 'static/upload' }) // 上傳文件之前目錄必須存在var storage = multer.diskStorage({// 配置上傳的文件保存的目錄destination: async function (req, file, cb) {// 1.獲取當前日期 20210417let day = sd.format(new Date(), 'YYYYMMDD')let dir = path.join('static/upload', day)// 2.按照日期生成圖片存儲目錄await mkdirp(dir) // mkdirp()是一個異步方法cb(null, dir)},// 修改上傳的文件的文件名filename: function (req, file, cb) {// 1.獲取后綴名let extname = path.extname(file.originalname)// 2.根據時間戳生成文件名cb(null, Date.now() + "." + extname)}})var upload = multer({ storage: storage })return upload} }module.exports = tools

nav.js:

const express = require("express") const tool = require("../../model/tool")var router = express.Router() router.get("/",(req, res)=> {res.send("導航列表") }) router.get("/add",(req, res)=> {res.render("admin/nav/add.html") }) router.post("/doAdd", tool.multer().single("pic") ,(req, res)=> {// 獲取表單傳過來的數據var body = req.body;console.log(body)console.log(req.file)res.send({body: req.body,file: req.file}) }) // var multer = require('multer') // const path = require('path') // // var upload = multer({ dest: 'static/upload' }) // // 上傳文件之前目錄必須存在 // var storage = multer.diskStorage({ // // 配置上傳的文件保存的目錄 // destination: function (req, file, cb) { // cb(null, 'static/upload') // }, // // 修改上傳的文件的文件名 // filename: function (req, file, cb) { // // 1.獲取后綴名 // let extname = path.extname(file.originalname)// // 2.根據時間戳生成文件名 // cb(null, Date.now()+ "." + extname) // } // }) // var upload = multer({ storage: storage })// router.post("/doAdd", upload.single("pic") ,(req, res)=> { // // 獲取表單傳過來的數據 // var body = req.body; // console.log(body) // console.log(req.file) // res.send({ // body: req.body, // file: req.file // }) // })router.get("/edit",(req, res)=> {res.send("修改導航") })router.post("/doEdit",(req, res)=> {res.send("執行修改導航") })module.exports = router

四、實現多文件上傳

add.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> </head> <body><form action="/admin/user/doAdd" method="POST" enctype="multipart/form-data">標題：<input type="text" name="title" id="title"><br><br>圖片1：<input type="file" name="pic1" id="pic1"><br><br>圖片2：<input type="file" name="pic2" id="pic2"><br><br>描述：<textarea name="desc" id="desc" cols="30" rows="10"></textarea><br><br><input type="submit" value="提交"></form></body> </html>

user.js :

const express = require("express") const tool = require('../../model/tool')var router = express.Router()router.get("/",(req, res)=> {res.send("用戶列表") })router.get("/add",(req, res)=> {res.render("admin/user/add.html") })let cpUpload = tool.multer().fields([{ name: 'pic1', maxCount: 1 }, { name: 'pic2', maxCount: 1 }])router.post("/doAdd", cpUpload, (req, res)=> {res.send({body: req.body,files: req.files}) })router.post("/doEdit",(req, res)=> {res.send("執行修改用戶") })router.get("/edit",(req, res)=> {res.send("修改用戶") })module.exports = router

tool.js:

var multer = require('multer') const path = require('path') const sd = require('silly-datetime') const mkdirp = require('mkdirp')let tools = {multer() {// var upload = multer({ dest: 'static/upload' }) // 上傳文件之前目錄必須存在var storage = multer.diskStorage({// 配置上傳的文件保存的目錄destination: async function (req, file, cb) {// 1.獲取當前日期 20210417let day = sd.format(new Date(), 'YYYYMMDD')let dir = path.join('static/upload', day)// 2.按照日期生成圖片存儲目錄await mkdirp(dir) // mkdirp()是一個異步方法cb(null, dir)},// 修改上傳的文件的文件名filename: function (req, file, cb) {// 1.獲取后綴名let extname = path.extname(file.originalname)// 2.根據時間戳生成文件名cb(null, Date.now() + "." + extname)}})var upload = multer({ storage: storage })return upload} }module.exports = tools

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Express 结合 multer 上传图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。