首先创建 html 5 表单并设置 enctype="multipart/form-data"，然后在node.js 中使用 express 和 Multer中间件 接收文件，接着配置 Multer 的存储路径与文件名规则，再定义 /upload路由 处理单文件上传，最后启动服务器测试上传功能。
如果您需要在 html5 文件中实现与 后端 Node.js 服务的数据交互，尤其是文件上传功能，可以通过 表单提交 结合 Multer 中间件来处理。以下是具体实现方式：
一、创建 HTML5 文件上传表单
该步骤用于构建 前端 页面中的文件上传界面，确保表单正确配置以支持文件传输。
1、使用 form 标签并设置 enctype="multipart/form-data"，这是文件上传必需的 编码 类型。
2、添加 input 标签，其 type 属性设为 file，并指定name 值以便 后端 识别。
立即学习 “ 前端免费学习笔记（深入）”；
3、示例代码如下：
<form action=”/upload” method=”post” enctype="multipart/form-data">
<input type=”file” name=”avatar” />
<button type=”submit”> 上传文件 </button>
</form>
二、配置 node.js 服务器接收文件
Node.js 需使用 Express 框架配合 Multer 中间件解析来自 HTML5 表单的文件数据。
1、初始化项目并安装必要依赖：
npm init -y
npm install express multer
2、创建基本的 Express 服务器，并引入 Multer 模块。
3、示例代码：
const express = require(‘express’);
const multer = require(‘multer’);
const app = express();
三、设置 Multer 存储规则
Multer 用于控制文件如何存储在服务器上，包括存储路径和文件名修改等。
1、定义存储引擎，使用 multer.diskStorage 自定义保存位置和文件命名逻辑。
2、配置 destination 指定文件存放目录，若目录不存在需提前创建。
3、配置 filename 函数决定上传后的文件名称，避免重名覆盖。
4、示例配置：
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(NULL, ‘uploads/’);
},
filename: (req, file, cb) => {
cb(null, date.now() + ‘-‘ + file.originalname);
}
});
const upload = multer({storage: storage});
四、定义文件上传 路由 接口
通过 Express 定义 POST 接口接收文件，利用 Multer 中间件进行处理。
1、使用 upload.single('avatar') 表示只上传一个文件，并对应表单中 name 为 avatar 的字段。
2、在路由回调中获取文件信息及表单其他字段（如有）。
3、示例路由：
app.post(‘/upload’, upload.single(‘avatar’), (req, res) => {
if (!req.file) {
return res.status(400).send(‘ 未选择文件 ’);
}
res.send(` 文件上传成功：${req.file.filename}`);
});
五、启动服务器并测试文件上传
完成前后端 编码 后，启动服务并访问 HTML 页面进行实际测试。
1、在项目根目录下运行 Node.js 应用：
node server.js
2、确保 uploads 文件夹已创建，或程序自动创建该目录。
3、通过 浏览器 访问 HTML 页面，选择文件并提交表单，验证是否成功上传至指定目录。
