Multer 文件上传 ​

// 引入模块
const express = require('express'),     // http 框架
    multer = require('multer'),             // 文件上传模块
    ejs = require('ejs'),    // 模板引擎
    path = require('path'); // 路径模块

// 创建 express 实例 app
const app = express();

// 配置模板引擎为 ejs
app.set('view engine', 'ejs');

// 配置 public 静态文件夹
app.use(express.static('./public'));


// 根据用户访问的路由返回对应的页面
app.get('/', (req, res) => {
    // 渲染 ./views/index.ejs 模板文件
    res.render('index');
})

// 设置磁盘存储引擎（multer 模块）
const storage = multer.diskStorage({
    // 每个函数都传递了请求对象 (req) 和一些关于这个文件的信息 (file)，还有一个回调函数(cb)
    // destination() 是用来确定上传的文件应该存储在哪个文件夹中。
    // 也可以提供一个 string(例如 '/tmp/uploads') 。如果没有设置 destination，则使用操作系统默认的临时文件夹。
    destination(req, file, cb) {
        // 指定上传的文件存储在哪个文件夹下
        cb(null, './public/uploads/');
    },
    // filename() 用于确定文件夹中的文件名的确定。 如果没有设置 filename，每个文件将设置为一个随机文件名，并且是没有扩展名的。
    // 所以必须设置文件的扩展名，可以从第二个参数 file 的 originalname 属性中得到完整的文件名（带有扩展名的）
    // 然后再使用 path.extname() 方法获取到扩展名，最后拼接到自定义的文件名即可。
    filename(req, file, cb) {
        // 通过将文件名 + 时间戳 + 原始文件的扩展名 得到一个独一无二的文件名称，用于存储到 ./public/uploads/
        // console.log(req);
        // console.log(file);
        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
});

// 初始化 upload 上传设置，参数为一个对象， storeage 指定存储方式为磁盘存储
// single() 方法接受一个以 fieldname 命名的文件。这个文件的信息保存在 req.file。
const upload = multer({
    storage: storage,
    // fileFilter() 过滤上传的文件，控制什么文件可以上传以及什么文件应该跳过
    fileFilter(req, file, cb) {
        // 这个函数应该调用 `cb` 用boolean值来指示是否应接受该文件
        // 拒绝这个文件，使用`false`，像这样:
        // cb(null, false)
        // 接受这个文件，使用`true`，像这样:
        // cb(null, true)
        // 如果有问题，你可以总是这样发送一个错误:
        // cb(new Error('I don\'t have a clue!'))

        // 调用 checkFileType 函数来通过扩展名判断文件的类型
        checkFileType(file, cb);
    },
    // limits 一个对象，指定一些数据大小的限制
    limits: {fileSize: 1000000}
}).single('myImage');

// 验证文件类型（过滤函数）
function checkFileType(file, cb) {
    // 允许的文件扩展名格式
    const filetypes = /jpeg|jpg|png|gif/;
    // 验证文件的扩展名
    const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
    // 验证minetype文件格式
    const mimetype = filetypes.test(file.mimetype);
    // 如果以上 extname 和 mimetype 都为 true ，就符合上传图片的文件格式

    if (extname && mimetype) {
        // 此文件符合图片类型的规则，返回到回调函数中
        return cb(null, true);
    } else {
        // 此文件不符合图片类型的规则，返回错误信息到回调函数中
        // 此错无信息将会传入到 upload 的第三个参数回调函数的参数 err 中，下面已经对这个 err 做了处理
        cb('错误：只支持图片格式');
    }
}

// 捕获 post 请求方法，获取到提交的图片数据
app.post('/upload', (req, res) => {
    // res.send('test');
    upload(req, res, (err) => {
        if (err) {
            // 有报错信息，将报错信息返回到 index 页面当中
            // 该报错信息由过滤函数 checkFileType 或 limits所返回
            res.render('index', {
                msg: err
            });
        } else {
            // 一切正常，获取上传的图片文件，图片信息都在 req.file 中
            console.log(req.file);
            // {
            //     fieldname: 'myImage',    // 自定义的文件名
            //     originalname: 'img_tree.png',    // 原始的文件名
            //     encoding: '7bit',    // 编码格式
            //     mimetype: 'image/png',   // 文件格式
            //     destination: './public/uploads/',    // 上传到的目录
            //     filename: 'myImage-1589986774057.png',   // 上传后的文件名
            //     path: 'public\\uploads\\myImage-1589986774057.png',  // 上传后的完整路径
            //     size: 5678   // 图片大小
            // }
            if (req.file == undefined) {
                // 用户没有上传文件而直接点击了提交
                // 渲染 index 页面，传递失败的信息到模板
                res.render('index', {
                    msg: '错误：请选择文件后再点击提交'
                });
            } else {
                // 用户选择了文件并点击了提交
                // 渲染 index 页面，传递成功的信息和图片的路径到模板
                res.render('index', {
                    msg: `图片 ‘${req.file.originalname}’ 已经成功上传^-^`,
                    file: `uploads/${req.file.filename}`  
                });
            }
        }
    });
});

// 定义端口
const port = 4000;

// 监听端口，运行服务器
app.listen(port, () => console.log(`服务器在 http://localhost:${port} 运行...`));

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传</title>
     <!-- 引入materialize 第三方CSS样式库 -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
</head>
<body>
    <div class="container">
        <h1>上传图片文件</h1>

            <!-- 表单必须设置 enctype="multipart/form-data"，否则上传文件不会有任何反应 -->
            <!-- 使用 post 方法提交文件数据到本地 /upload 接口 -->
          <form action="/upload" method="POST" enctype="multipart/form-data">
              <div class="file-field input-field">
                  <div class="btn grey">
                      <span>选择图片</span>
                      <input type="file" name="myImage">
                  </div>
                  <div class="file-path-wrapper">
                      <input class="file-path validate" type="text">
                  </div>
              </div>

              <button type="submit" class="btn">确认提交</button>

                <!-- 错误提醒 -->
              <h5> <%= typeof msg != 'undefined' ? msg : '' %></h5>
          </form>

          <br>

          <!-- 上传成功后的图片 -->
          <img src="<%= typeof file != 'undefined' ? file : '' %>" class="responsive-img" alt="">

    </div>

    <!-- 引入 jquery  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
     <!-- 引入 materialize JavaScript -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
</body>
</html>