在现代Web开发中，文件上传是许多应用场景的基础功能，比如用户头像上传、文档提交、图片分享等。如何高效、稳定地将HTML表单中的文件传递到Node.js后端并妥善处理，是开发者必须掌握的核心技能之一。本文将带你从零开始，完整实现一个基于HTML表单的文件上传流程，涵盖前端构建、后端接收与存储的全过程。

首先，我们从前端入手。创建一个简单的HTML页面，包含一个用于选择文件的表单。这个表单需要设置enctype="multipart/form-data"，这是文件上传的关键配置，它确保浏览器能够正确编码二进制数据。代码如下：

html

上传文件

这里我们不仅使用了传统的表单提交方式，还加入了JavaScript的fetch请求，实现无刷新上传，提升用户体验。通过FormData对象，我们可以轻松封装文件字段，并发送到服务器。

接下来是Node.js后端的搭建。我们需要使用Express框架来快速构建HTTP服务，并借助Multer中间件处理多部分表单数据（即文件上传）。首先初始化项目：

bash npm init -y npm install express multer path

然后创建主服务文件server.js：

javascript
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();

// 设置静态文件目录，用于提供HTML页面
app.use(express.static('public'));

// 配置Multer存储选项
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, 'uploads/'); // 文件保存路径
},
filename: (req, file, cb) => {
const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
}
});

const upload = multer({ storage: storage });

// 处理文件上传的POST请求
app.post('/upload', upload.single('file'), (req, res) => {
if (!req.file) {
return res.status(400).json({ error: '未收到文件' });
}
res.json({
message: '文件上传成功',
filename: req.file.filename,
path: req.file.path
});
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(服务器运行在 http://localhost:${PORT});
});

在这段代码中，multer.diskStorage定义了文件的存储位置和命名规则，避免重名问题。upload.single('file')表示只接受一个名为file的文件字段，这与前端表单中的name="file"相对应。一旦文件上传成功，后端会返回JSON格式的响应，包含文件名和存储路径。

为了确保项目结构清晰，建议将HTML文件放在public目录下，上传的文件存入uploads目录。首次运行前请手动创建这两个文件夹：

bash mkdir public uploads

将HTML内容保存为public/index.html，然后启动服务：

bash node server.js

访问 http://localhost:3000，即可看到上传界面。选择任意文件并提交，你会看到“上传成功”的提示，并能在uploads目录中找到对应文件。

此外，该方案支持扩展。例如，你可以限制文件类型、大小，或使用内存存储替代磁盘存储以提高性能。Multer提供了丰富的配置选项，如fileFilter和limits，可灵活应对不同业务需求。

整个流程简洁高效：前端通过标准表单收集文件，利用FormData发送请求；后端使用Express接收，Multer解析并存储文件，最后返回结果。这种组合稳定可靠，广泛应用于生产环境。

掌握这一技术栈，不仅能完成基础的文件上传，也为后续集成云存储、图像处理等功能打下坚实基础。