使用Express和express-fileupload实现文件上传与本地存储

本教程详细介绍了如何在Node.js Express应用中处理HTML文件上传。通过在前端HTML表单中设置`enctype="multipart/form-data"`，并在后端利用`express-fileupload`中间件，实现文件的高效接收、验证和安全地存储到服务器的本地文件系统，确保上传文件内容的完整性而非仅文件名。

在现代Web应用开发中，文件上传是一个常见且重要的功能，例如用户头像、产品图片等。本文将指导您如何在Node.js Express框架下，结合前端HTML表单，实现用户上传图片文件到服务器本地存储的完整流程。我们将重点解决仅存储文件名而非文件内容的问题，并提供一个健壮的解决方案。

1. 前端HTML表单配置

要允许浏览器发送文件数据，HTML表单必须进行特殊配置。关键在于设置enctype="multipart/form-data"属性。这个属性告诉浏览器，表单数据将以多部分编码的形式发送，其中包括二进制文件内容。

以下是一个简单的HTML表单示例，用于上传图片：

<form action="/dish/new" method="POST" enctype="multipart/form-data">
  <label for="image-input">选择图片：</label>
  <input
    type="file"
    name="thumbnail"
    id="image-input"
    accept="image/png, image/jpg, image/jpeg"
  />
  <br>
  <input type="text" name="name" placeholder="菜品名称" />
  <br>
  <input type="submit" value="上传" />
</form>

关键点：

• action="/dish/new": 指定表单提交的目标URL。
• method="POST": 文件上传通常使用POST请求。
• enctype="multipart/form-data": 这是实现文件上传必不可少的属性。
• <input type="file" name="thumbnail">: name="thumbnail"属性在后端用于识别这个文件字段。
• accept="image/png, image/jpg, image/jpeg": 这是一个可选但推荐的属性，用于提示用户选择特定类型的文件，但服务器端仍需进行严格验证。

2. 后端Express处理：使用 express-fileupload

Express本身不直接处理multipart/form-data类型的数据。我们需要一个中间件来解析这些数据。express-fileupload是一个流行的选择，它提供了一个简单易用的API来处理文件上传。

ERMEB云盘发卡小程序源码

ERMEB云盘发卡系统官方正版系统发卡系统操作简单、方便、易懂，系统微信小程序前端采用nuiapp、后端采用think PHP6，PC前端采用vue开发，使用场景：文件上传储存。适合个人/个体/中小企业使用，本系统配合微信小程序端进行使用，文件下载以及发卡商品卡密领取都需要进入小程序内获取下载码以及卡密领取，小程序内可设置积分充值以及任务获取积分，支持微信激励广告领取文件下载码以及卡密商品，可实现

0

查看详情

2.1 安装 express-fileupload

首先，在您的Express项目目录中安装 express-fileupload：

npm install express-fileupload

2.2 引入并注册中间件

在您的Express应用入口文件（通常是app.js或server.js）中，引入并注册 express-fileupload 中间件。

const express = require('express');
const fileupload = require('express-fileupload');
const path = require('path'); // 用于处理文件路径

const app = express();

// 注册 express-fileupload 中间件
// 可以在这里配置选项，例如文件大小限制等
app.use(fileupload({
  limits: { fileSize: 50 * 1024 * 1024 }, // 限制文件大小为 50MB
  abortOnLimit: true, // 达到限制时中止请求
}));

// 其他 Express 中间件，例如解析 JSON 和 URL 编码的请求体
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 设置静态文件目录，以便浏览器可以访问上传的图片
app.use('/images', express.static(path.join(__dirname, 'userdata', 'images', 'dishes')));

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

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

2.3 在路由中处理上传文件

注册 express-fileupload 后，上传的文件将可以通过 req.files 对象访问到。每个文件都是一个对象，包含文件名、MIME类型以及一个 mv() 方法，用于将文件移动到服务器的指定位置。

const express = require('express');
const router = express.Router();
const path = require('path');

// 假设这是您的路由文件，例如 routes/dish.js
// 并在 app.js 中通过 app.use('/dish', dishRouter); 引入

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

  // req.files.thumbnail 对应前端 input 标签的 name="thumbnail"
  let thumbnail = req.files.thumbnail;

  // 获取其他表单字段
  let { name, desc, cost, isnonveg } = req.body;

  // 构造文件保存路径和文件名
  const uploadDir = path.join(__dirname, '..', 'userdata', 'images', 'dishes');
  // 确保目录存在，或者在应用启动时创建
  // const fs = require('fs');
  // if (!fs.existsSync(uploadDir)) {
  //   fs.mkdirSync(uploadDir, { recursive: true });
  // }

  // 建议生成一个唯一的文件名，以避免文件名冲突
  // 例如：使用 UUID 或者时间戳
  const fileExtension = path.extname(thumbnail.name); // 获取原始文件扩展名
  const newFileName = `${Date.now()}-${Math.round(Math.random() * 1E9)}${fileExtension}`;
  const uploadPath = path.join(uploadDir, newFileName);

  // 使用 mv() 方法将文件从临时位置移动到目标位置
  thumbnail.mv(uploadPath, (err) => {
    if (err) {
      console.error('文件保存失败:', err);
      return res.status(500).send(err);
    }

    console.log(`文件 '${newFileName}' 已存储到: ${uploadPath}`);
    // 文件成功上传后，可以进行数据库操作，将图片路径保存到数据库
    // 例如：Dish.create({ name, desc, cost, isnonveg, thumbnailPath: `/images/${newFileName}` });

    res.redirect('/success-page'); // 重定向到成功页面
  });
});

module.exports = router;

代码解释：

• req.files: 包含所有上传文件的对象。req.files.thumbnail 对应于前端 <input type="file" name="thumbnail">。
• thumbnail.mv(uploadPath, callback): 这是 express-fileupload 提供的核心方法，用于将上传的文件从服务器的临时目录移动到您指定的 uploadPath。
• path.join(): 用于安全地拼接文件路径，避免不同操作系统路径分隔符的问题。
• Date.now() + '-' + Math.round(Math.random() * 1E9): 生成一个相对唯一的文件名，防止用户上传同名文件导致覆盖。
• path.extname(thumbnail.name): 获取上传文件的原始扩展名，以便保存为正确的文件类型。
• 错误处理：mv() 方法的回调函数会接收一个 err 参数，务必检查并处理可能发生的错误。

3. 注意事项与最佳实践

• 文件大小限制： 在 fileupload() 中间件中配置 limits 选项，限制用户上传的文件大小，防止恶意攻击或资源耗尽。
• 文件类型验证： 尽管前端有 accept 属性，但后端仍需严格验证文件的MIME类型（例如 thumbnail.mimetype），防止上传可执行文件或其他恶意文件。不要仅仅依赖文件扩展名。
• 文件名冲突与安全性：
  • 始终为上传的文件生成一个唯一的新文件名（如使用UUID或时间戳+随机数），避免直接使用用户提供的文件名，以防止文件名冲突和路径遍历攻击。
  • 对文件名进行清理，移除任何潜在的恶意字符。
• 目录权限： 确保您的Node.js进程对目标存储目录（例如 userdata/images/dishes）具有写入权限。
• 错误处理： 完善 mv() 方法的回调函数中的错误处理逻辑，向用户提供友好的错误提示。
• 静态文件服务： 如果您希望通过URL访问上传的图片，需要配置Express的静态文件服务，例如 app.use('/images', express.static(path.join(__dirname, 'userdata', 'images', 'dishes')));。这样，当您在数据库中保存 /images/your-new-file.jpg 时，浏览器就可以通过 http://yourdomain.com/images/your-new-file.jpg 访问到它。
• 异步操作： 文件上传和移动都是异步操作，确保您的代码正确处理回调或使用 async/await 结构。
• 云存储： 对于生产环境，强烈建议使用云存储服务（如AWS S3、Azure Blob Storage、七牛云、阿里云OSS）来存储用户上传的文件，这能提供更好的可伸缩性、持久性和CDN集成。

总结

通过本教程，您应该已经掌握了如何在Node.js Express应用中处理HTML文件上传的核心流程。关键在于前端HTML表单的 enctype="multipart/form-data" 配置，以及后端 express-fileupload 中间件的正确使用。遵循最佳实践，如文件大小和类型验证、唯一文件名生成以及恰当的错误处理，可以构建一个安全、健壮的文件上传功能。

以上就是使用Express和express-fileupload实现文件上传与本地存储的详细内容，更多请关注php中文网其它相关文章！