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>

在上述代码中，name="thumbnail" 是文件输入字段的名称，服务器将通过这个名称来识别上传的文件。

后端中间件设置

在 Node.js 服务器端，我们需要一个专门的中间件来解析 multipart/form-data 类型的请求体，并提取出上传的文件。express-fileupload 是一个流行且易于使用的中间件，它能够很好地完成这项工作。

1. 安装 express-fileupload

首先，通过 npm 安装 express-fileupload：

一个类似淘宝助理、ebay助理的客户端程序，用来方便的在本地处理商店数据，并能够在本地商店、网上商店和第三方平台之间实现数据上传下载功能的工具。功能说明如下：1.连接本地商店：您可以使用ShopEx助理连接一个本地安装的商店系统，这样就可以使用助理对本地商店的商品数据进行编辑等操作，并且数据也将存放在本地商店数据库中。默认是选择“本地未安装商店”，本地还未安

npm install express-fileupload

2. 注册中间件

在你的 Express 应用主文件（如 app.js 或 server.js）中，引入并注册 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}`);
});

处理文件上传路由

注册 express-fileupload 中间件后，所有上传的文件都将通过 req.files 对象访问。req.files 是一个对象，其键是前端 标签的 name 属性值。

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;

注意事项与最佳实践

1. 文件命名: 强烈建议为上传的文件生成唯一的名称（例如，使用时间戳、UUID 或哈希值），以防止文件名冲突和覆盖现有文件。
2. 目标目录: 确保文件上传的目标目录存在。在生产环境中，可能需要使用 fs.mkdirSync(dir, { recursive: true }) 来确保目录存在。同时，要确保 Node.js 进程对该目录具有写入权限。
3. 文件类型与大小验证: 在服务器端对上传的文件进行类型（thumbnail.mimetype）和大小（thumbnail.size）验证是至关重要的，以防止恶意文件上传和服务器资源滥用。express-fileupload 提供了 limits 选项来配置文件大小限制。
4. 错误处理: 始终包含健壮的错误处理机制，以应对文件上传失败、移动失败等情况。
5. 安全性:
   • 路径遍历攻击: 永远不要直接使用用户提供的文件名来构建文件路径，始终进行净化或生成新的唯一文件名。
   • 文件内容检查: 对于关键应用，除了检查文件扩展名和 MIME 类型，可能还需要更深层次的内容分析，以防止上传恶意可执行文件。
   • 存储位置: 不要将用户上传的文件直接存储在 Web 可访问的根目录下，除非它们是静态资源（如图片）。对于敏感文件，应存储在 Web 根目录之外，并通过服务器端逻辑进行访问控制。
6. 异步操作: 文件上传和移动是异步操作。确保你的代码正确处理回调或使用 async/await 来管理这些异步流程。

通过遵循上述步骤和最佳实践，你可以安全、高效地在 Node.js 应用中实现文件上传功能，并将用户上传的图片文件存储到服务器的本地文件系统。