本教程详细介绍了如何使用 html 表单、javascript `fetch` api 和 node.js express 框架配合 multer 中间件实现文件上传功能。文章将重点解决前端表单提交与后端 multer 配置不匹配导致的文件上传失败问题，通过修改前端提交逻辑、确保字段名一致性及后端 multer 正确配置，构建一个健壮的文件上传系统。
一、文件上传工作流概述
在Web应用中实现文件上传，通常涉及客户端（浏览器）和服务器端（后端应用）的协同工作。客户端负责选择文件、封装数据并发送请求；服务器端负责接收请求、解析文件数据并将其存储到指定位置。
1. 客户端角色 (HTML & JavaScript)
- HTML 表单: 提供文件选择输入框 (<input type="file">) 和提交按钮。关键在于设置 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 <form> 标签中移除 action 属性。当使用 JavaScript fetch API 进行文件上传时，我们不再需要浏览器默认的表单提交行为。
<form
method="POST"
name="form"
class="form vert-align"
enctype="multipart/form-data"
>
<h1 class="first-page">FILE DA MANDARE AD AZURE FORM RECOGNIZER</h1>
<div class="container1">
<!-- custom upload button -->
<label for="file" class="label-style-1 upload-label">UPLOAD FILE</label>
<input type="file" id="file" name="file" multiple hidden />
<span>No file uploaded</span>
</div>
<div class="container3">
<!-- custom submit button -->
<label for="submit" class="label-style-1 submit-label" hidden>OK</label>
<input type="submit" id="submit" name="submit" hidden />
<!-- custom reset button -->
<label for="cancel" class="label-style-1 cancel-label" hidden>CANCEL</label>
<input type="reset" id="cancel" name="cancel" hidden />
</div>
</form>说明:
立即学习“前端免费学习笔记（深入）”；
- 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(
"<div class='container2'>" +
"<span class='pop-head'>Uploaded:</span> <ul></ul></div>"
);
$(".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(
"<li><div class='container4'><span href='" +
myFiles[i] +
"' download>" +
myFiles[i].name +
" (" +
numberWithDots(Math.floor(myFiles[i].size / 1024 + 1)) +
" KB)</span> " +
"<label for='remove" +
i +
"' class='label-style-1 remove' id='lab" +
i 
