Node.js 中处理 HTML 文件上传并本地存储的教程

<form action="/dish/new" method="POST" enctype="multipart/form-data">
  <input
    type="file"
    name="thumbnail"
    id="image-input"
    accept="image/png, image/jpg, image/jpeg"
  />
  <input type="text" name="name" placeholder="Dish Name" />
  <input type="submit" value="Upload Dish" />
</form>

npm install express-fileupload

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

// 注册 express-fileupload 中间件
// 默认情况下，文件将存储在内存中。如果需要更大的文件，可以配置 tempFileDir 选项。
app.use(fileUpload({
    // 可选配置项
    // useTempFiles : true,
    // tempFileDir : '/tmp/'
}));

// 其他 Express 中间件和路由
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 假设你的路由文件在 routes/dish.js
const dishRoutes = require('./routes/dish');
app.use('/dish', dishRoutes);

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

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

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

  // 获取上传的文件，这里的 'thumbnail' 对应前端 input 的 name 属性
  let thumbnail = req.files.thumbnail;

  // 确保目标目录存在，如果不存在则创建
  const uploadDir = path.join(__dirname, '../public/images/dishes');
  // 注意：在生产环境中，你可能需要一个更健壮的目录创建和权限管理方案
  // 例如：fs.mkdirSync(uploadDir, { recursive: true });

  // 生成一个唯一的文件名以避免覆盖
  const fileName = `${Date.now()}-${thumbnail.name}`;
  const uploadPath = path.join(uploadDir, fileName);

  // 使用 mv() 方法将文件移动到服务器上的指定位置
  thumbnail.mv(uploadPath, (err) => {
    if (err) {
      console.error('文件移动失败:', err);
      return res.status(500).send(err);
    }

    console.log(`文件 '${fileName}' 已成功存储到 '${uploadPath}'`);
    // 文件成功上传后，可以进行其他数据库操作或重定向
    res.redirect('/success'); // 或返回 JSON 响应
  });
});

module.exports = router;