本教程详细介绍了如何使用 html 表单、javascript `fetch` api 和 node.js express 框架配合 multer 中间件实现文件上传功能。文章将重点解决前端表单提交与后端 multer 配置不匹配导致的文件上传失败问题，通过修改前端提交逻辑、确保字段名一致性及后端 multer 正确配置，构建一个健壮的文件上传系统。
一、文件上传工作流概述
在Web应用中实现文件上传，通常涉及客户端（浏览器）和服务器端（后端应用）的协同工作。客户端负责选择文件、封装数据并发送请求；服务器端负责接收请求、解析文件数据并将其存储到指定位置。
1. 客户端角色 (HTML & JavaScript)
- HTML 表单: 提供文件选择输入框 () 和提交按钮。关键在于设置 enctype="multipart/form-data"，这是上传文件所必需的编码类型。
- JavaScript: 负责监听文件选择事件，将选中的文件封装到 FormData 对象中，并通过异步请求（如 fetch 或 XMLHttpRequest）发送到服务器。这样做可以避免页面刷新，提供更好的用户体验。
2. 服务器端角色 (Node.js & Multer)
- Node.js Express: 作为Web服务器框架，处理HTTP请求和响应。
- Multer: 是一个Node.js中间件，专门用于处理 multipart/form-data 类型的数据，主要用于文件上传。它能够解析上传的文件，并提供灵活的存储配置（如内存存储或磁盘存储）。
二、前端实现：HTML 表单与 JavaScript 优化
原始代码中，HTML 表单的 action 属性指向 /upload，而提交按钮的点击事件又试图跳转页面。这种混合了传统表单提交和JavaScript页面跳转的逻辑，导致文件数据未能正确发送到后端。正确的做法是，通过 JavaScript 完全接管表单提交过程。
1. HTML 表单结构调整
首先，从 HTML
说明:
立即学习“前端免费学习笔记（深入）”；
- method="POST": 指定HTTP请求方法为 POST。
- enctype="multipart/form-data": 告知浏览器和服务器，表单数据将以多部分形式编码，支持文件上传。
- name="file": 这是文件输入字段的名称，在后端通过 Multer 访问文件时会用到。
2. JavaScript 处理文件选择与 FormData
当用户选择文件后，我们需要捕获这些文件，并将它们添加到 FormData 对象中。FormData 对象是用于通过 fetch 或 XMLHttpRequest 发送表单数据的标准方式。
/* regular expression to show thousand separator */
function numberWithDots(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
let myFiles = []; // 初始化为数组，方便管理
let formData = new FormData(); // 初始化 FormData 对象
$(document).ready(function () {
$("#cancel").on("click", function () {
location.reload();
});
$("#file").on("change", (event) => {
myFiles = Array.from(event.target.files); // 获取用户选择的文件列表并转换为数组
// 清空旧的 formData，避免重复添加
formData = new FormData();
// 将每个文件添加到 FormData 对象中
// 注意：这里的 "files" 是后端 Multer 将会使用的字段名
for (let i = 0; i < myFiles.length; i++) {
let file = myFiles[i];
formData.append("files", file, file.name); // 字段名应为 "files"
}
/* creates a container for the list that will be created */
$(".container1").html(
"" +
"Uploaded:
"
);
$(".first-page").css("margin-top", "10vh");
/* writes the name and size of the files chosen */
for (let i = 0; i < myFiles.length; i++) {
$("ul").append(
"" +
myFiles[i].name +
" (" +
numberWithDots(Math.floor(myFiles[i].size / 1024 + 1)) +
" KB) " +
"
