node.js multer 图像上传组件示例 【多文件上传】。
最编程
2024-07-18 18:20:01
...
多文件上传:
views/admin/user/add.html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多文件上传</title> </head> <body> <h2>多文件上传:</h2> <form action="/admin/user/doAdd" method="post" enctype="multipart/form-data"> <span>名称:</span> <input type="text" name="title" id="title"> <br><br> <span>图片1:</span> <input type="file" name="pic1" id="pic1"> <br><br> <span>图片2:</span> <input type="file" name="pic2" id="pic2"> <br><br> <span>图片3:【上传多个:input 里设置 multiple="multiple"】 </span> <input type="file" name="photos" id="photos" multiple="multiple"> <br><br> <span>描述:</span> <textarea name="desc" id="desc" cols="30" rows="1"></textarea> <br><br> <input type="submit" value="提交"> </form> </body> </html>
model/tools.js :
var multer = require("multer"); const path = require("path"); // 引入时间格式化组件 const dayjs = require("dayjs"); // 引入mkdirp const mkdirp = require("mkdirp"); let tools = { multer() { var storage = multer.diskStorage({ // 配置上传的目录 destination: async (req, file, cb) => { // 1、获取当前日期 例如 20210102 var day = dayjs(new Date()).format("YYYYMMDD"); let dir = path.join("static/upload", day); // 2、按照日期生成图片的存储目录 mkdirp 是异步方法,返回的是promise,要用 async await 解析 await mkdirp(dir); cb(null, dir); //上传之前目录必须存在 /* 不需要生成日期文件夹的可以 */ }, filename: (req, file, cb) =>{ var now = new Date(); var month_int = now.getMonth() + 1; //月份从0开始算,0是1月份,要加一; // 用时间当做名称,也可以用 Date.now() 时间戳当名称 var time = dayjs(new Date()).format("YYYYMMDDHHmmssSSS") let extname = path.extname(file.originalname); cb(null, time + extname); // cb(null, Date.now() + extname); }, }); var upload = multer({ storage: storage }); return upload; }, md5() {}, }; module.exports = tools;
routes/admin/user.js :
const express = require("express"); const tools = require("../../model/tools"); var router = express.Router(); router.get("/", (req, res) => { res.send("用户列表"); }); router.get("/add", (req, res) => { res.render("admin/user/add"); }); router.get("/edit", (req, res) => { res.send("修改用户"); }); var cpUpload = tools.multer().fields([ { name: "pic1", maxCount: 1 }, { name: "pic2", maxCount: 1 }, { name: "photos", maxCount: 10 }, ]); // var cpUpload = tools.multer().array("photos", 12); router.post("/doAdd", cpUpload, (req, res) => { console.log(req.body); res.send({ body: req.body, file1: req.files["pic1"], file2: req.files["pic2"], file3: req.files["photos"], }); }); router.post("/doEdit", (req, res) => { res.send("执行修改"); }); module.exports = router;
上一篇: Multer 解释
推荐阅读
-
在 node.js 中使用 express + multer 处理文件上传
-
node.js multer 图像上传组件示例 【多文件上传】。
-
[nodejs] multer(图像、文件上传处理模块)
-
使用 Multer 在 Node.js 中上传文件
-
使用 nodejs 文件上传组件 multer
-
节点+multer 中间件实现单文件、多文件上传--超详细
-
使用 Multer 在 Node.js 中上传文件
-
Node.js]使用 Multer 进行文件上传和下载
-
Node.js]使用 Multer 进行文件上传和下载
-
nodejs multer 实现文件上传功能全解(表单上传、获取请求上传、多文件上传)