Node.js Express中实现HTML文件上传与服务器本地存储

<form action="/dish/new" method="POST" enctype="multipart/form-data">
  <label for="name">菜品名称:</label>
  <input type="text" name="name" id="name" required />
  <br />

  <label for="desc">描述:</label>
  <textarea name="desc" id="desc"></textarea>
  <br />

  <label for="cost">价格:</label>
  <input type="number" name="cost" id="cost" required />
  <br />

  <label for="isnonveg">是否非素:</label>
  <input type="checkbox" name="isnonveg" id="isnonveg" />
  <br />

  <label for="image-input">选择图片:</label>
  <input
    type="file"
    name="thumbnail"
    id="image-input"
    accept="image/png, image/jpg, image/jpeg"
    hidden
  />
  <button type="button" onclick="document.getElementById('image-input').click()">上传图片</button>
  <br />

  <button type="submit">提交</button>
</form>

npm install express-fileupload

const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();

// 其他中间件，例如body-parser（用于处理非文件字段）
app.use(express.json()); // 解析JSON格式的请求体
app.use(express.urlencoded({ extended: true })); // 解析URL-encoded格式的请求体

// 注册express-fileupload中间件
// 可以在此处添加配置选项，例如文件大小限制、临时目录等
app.use(fileUpload({
  createParentPath: true, // 允许自动创建目标目录
  limits: { fileSize: 5 * 1024 * 1024 }, // 限制文件大小为5MB
  abortOnLimit: true // 达到限制时中止请求
}));

// 定义静态文件目录，以便浏览器可以访问上传的图片
app.use(express.static('public'));

// ... 其他路由和应用配置

const express = require('express');
const router = express.Router();
const path = require('path'); // 用于处理文件路径

router.post('/dish/new', async (req, res) => {
  try {
    // 获取非文件字段数据
    let { name, desc, cost, isnonveg } = req.body;

    // 检查是否有文件上传
    if (!req.files || Object.keys(req.files).length === 0) {
      return res.status(400).send('没有文件被上传。');
    }

    // 获取上传的文件，这里假设文件输入字段的name是'thumbnail'
    let thumbnail = req.files.thumbnail;

    // 验证文件类型（可选但推荐）
    const allowedTypes = ['image/png', 'image/jpg', 'image/jpeg'];
    if (!allowedTypes.includes(thumbnail.mimetype)) {
      return res.status(400).send('只允许上传PNG、JPG或JPEG格式的图片。');
    }

    // 生成一个唯一的文件名，以避免文件冲突
    // 推荐使用UUID或时间戳结合原始文件名
    const fileName = `${Date.now()}-${thumbnail.name}`;
    const uploadPath = path.join(__dirname, '../public/images/dishes', fileName);

    // 使用mv()方法将文件移动到目标目录
    await thumbnail.mv(uploadPath);

    console.log(`图片已存储到: ${uploadPath}`);

    // 在这里可以进行数据库操作，将文件路径存储到数据库中
    // 例如：await Dish.create({ name, desc, cost, isnonveg, thumbnailPath: `/images/dishes/${fileName}` });

    res.redirect('/success'); // 上传成功后重定向
  } catch (err) {
    console.error('文件上传失败:', err);
    res.status(500).send('文件上传失败，请稍后再试。');
  }
});

module.exports = router;

// app.js 或 server.js
app.use(express.static(path.join(__dirname, 'public')));

const { v4: uuidv4 } = require('uuid'); // 安装 npm install uuid
const fileName = `${uuidv4()}-${thumbnail.name.replace(/\s/g, '_')}`; // 替换空格以避免URL问题