在Web开发中，html5页面经常需要把用户选择的图片或文档发送到后端Node.js服务器保存。前端利用FormData对象组织文件数据，后端使用Express配合Multer中间件解析multipart/form-data请求，就能完成稳定的文件交互。
一、前端html5如何发送文件
html5提供了<input type="file">控件以及FormData接口，可以把文件放进请求体里发给服务器。下面是一段最简单的上传页面代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文件上传示例</title>
</head>
<body>
<input type="file" id="fileInput">
<button id="uploadBtn">上传</button>
<script>
document.getElementById('uploadBtn').onclick = function () {
// 获取用户选择的文件
var file = document.getElementById('fileInput').files[0];
if (!file) {
alert('请先选择文件');
return;
}
// 使用FormData包装文件
var formData = new FormData();
formData.append('myFile', file);
// 发送给Node.js后端
fetch('http://127.0.0.1:3000/upload', {
method: 'POST',
body: formData
})
.then(function (res) { return res.json(); })
.then(function (data) { alert('上传成功：' + data.filename); })
.catch(function (err) { alert('上传失败'); });
};
</script>
</body>
</html>
二、后端Node.js使用Multer接收文件
Multer是专门处理multipart/form-data的Node.js中间件，通常和Express一起用。先安装依赖：
npm init -y npm install express multer
接着编写服务端代码，指定文件存放目录和命名规则：
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
// 配置Multer存储引擎
const storage = multer.diskStorage({
// 设置文件保存目录
destination: function (req, file, cb) {
cb(null, 'uploads/');
},
// 自定义文件名
filename: function (req, file, cb) {
const uniqueName = Date.now() + path.extname(file.originalname);
cb(null, uniqueName);
}
});
const upload = multer({ storage: storage });
// 处理html5发来的上传请求
app.post('/upload', upload.single('myFile'), function (req, res) {
if (!req.file) {
return res.status(400).json({ error: '未收到文件' });
}
res.json({ filename: req.file.filename });
});
app.listen(3000, function () {
console.log('服务器运行在 http://127.0.0.1:3000');
});
核心字段说明
upload.single('myFile')中的myFile必须和前端FormData的key一致。req.file包含保存后的文件信息，如filename、size等。- 上传的文件会写入项目下的
uploads/目录，需提前创建该文件夹。
三、常见错误处理
| 问题 | 原因 | 解决办法 |
|---|---|---|
| req.file为undefined | 前后端字段名不一致 | 确认single()参数与FormData键名相同 |
| 413请求过大 | 文件超出默认限制 | 在multer中设置limits: { fileSize: 1024*1024*10 } |
四、小结
通过html5的FormData加上Node.js的Multer中间件，文件交互变得非常简单。前端负责采集和发送，后端负责解析和存储，两者通过统一的字段名协作。掌握这个模式后，你可以轻松扩展出多文件上传、文件类型过滤等实用功能。