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 @ 2021-01-05 18:05  半遮  阅读(478)  评论(0)  编辑  收藏  举报