首先创建html5表单并设置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页面，选择文件并提交表单，验证是否成功上传至指定目录。