node.js 之 multer 图片上传组件示例 【多文件上传】

多文件上传：

 

 

 

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;
复制代码

 

posted @   半遮  阅读(492)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
点击右上角即可分享
微信分享提示