在现代Web开发中，文件上传是许多应用不可或缺的功能，无论是用户头像、文档提交还是图片分享，都离不开这一基础操作。本文将带你从零开始，使用标准的HTML表单向一个Node.js后端服务发送POST请求，完成文件上传的全过程。整个流程简单清晰，无需复杂框架，适合刚接触前后端交互的开发者理解核心原理。

首先，我们从前端开始。要实现文件上传，必须使用HTML的<form>标签，并设置正确的属性。最关键的是enctype="multipart/form-data"，这个编码类型允许表单包含二进制文件数据。如果缺少这个设置，文件将无法正确传输。下面是一个简单的HTML表单示例：

html

上传你的文件

在这个表单中，action指向本地运行的Node.js服务器地址，method为POST，确保数据能被正确提交。name="uploadedFile"是后续在后端识别该文件字段的关键名称。

接下来是后端部分。我们需要搭建一个基于Express的Node.js服务器，并使用multer中间件来处理multipart/form-data类型的请求。Multer是专为文件上传设计的流行工具，能轻松解析表单中的文件字段。

首先初始化项目并安装依赖：

bash npm init -y npm install express multer

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

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

// 配置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('uploadedFile'), (req, res) => {
if (!req.file) {
return res.status(400).send('未接收到文件');
}

console.log('文件已上传：', req.file.filename);
res.send(文件上传成功！文件名：${req.file.filename});
});

// 启动服务器
app.listen(3000, () => {
console.log('服务器运行在 http://localhost:3000');
});

代码中，multer.diskStorage定义了文件的存储路径和命名规则，避免重名冲突。upload.single('uploadedFile')表示只接受一个名为uploadedFile的文件字段，这与前端表单中的name属性保持一致。

别忘了在项目根目录下创建uploads文件夹，用于存放上传的文件：

bash mkdir uploads

启动服务器后，打开前面编写的HTML页面，选择任意文件并提交。如果一切正常，你会看到“文件上传成功”的提示，同时在uploads目录中找到带有时间戳的新文件。

值得注意的是，这种上传方式虽然简单直接，但在生产环境中还需考虑安全性问题。例如限制文件类型、大小，防止恶意上传。Multer支持这些配置，比如可以这样限制：

javascript const upload = multer({ storage: storage, limits: { fileSize: 5 * 1024 * 1024 }, // 限制5MB fileFilter: (req, file, cb) => { const allowedTypes = /jpeg|jpg|png|pdf/; const extname = allowedTypes.test(path.extname(file.originalname).toLowerCase()); const mimetype = allowedTypes.test(file.mimetype); if (extname && mimetype) { return cb(null, true); } else { cb(new Error('仅支持图片或PDF文件')); } } });

通过上述步骤，我们完成了一个完整的文件上传链路：从HTML表单构建，到Node.js后端接收并保存文件。整个过程不依赖任何前端框架，纯粹使用原生技术栈，便于理解底层机制。对于希望深入学习Web数据交互的开发者来说，这是打下坚实基础的重要一步。