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

单文件上传

目录：

 

 

 

nav/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/nav/doAdd" method="post" enctype="multipart/form-data">
        <span>名称：</span>
        <input type="text" name="title" id="title">
        <br><br>
        <span>图片：</span>
        <input type="file" name="pic" id="pic">

        <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/nav.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.send("添加导航");
  res.render("admin/nav/add");
});

router.get("/edit", (req, res) => {
  res.send("修改导航");
});

// router.post("/doAdd", upload.single("pic"), (req, res) => {
router.post("/doAdd", tools.multer().single("pic"), (req, res) => {
  // var body = req.body;
  // console.log(body);
  // res.send("添加导航:" + body.title );
  console.log(req.body);
  res.send({
    body: req.body,
    file: req.file,
  });
});

router.post("/doEdit", (req, res) => {
  res.send("执行导航");
});

module.exports = router;

 

posted @ 2021-01-05 12:30  半遮  阅读(163)  评论(0)    收藏  举报