本教程详细介绍了如何使用 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

  
FILE DA MANDARE AD AZURE FORM RECOGNIZER

  
    
    UPLOAD FILE
    
    No file uploaded
  

  
    
    
    
    
    
    
  

说明:

• 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)    " +
          "
        行业资讯    】
    【
        网络运营    】
    【
        GEO优化    】
    【
        营销推广    】
    【
        SEO优化    】
    【
        技术教程    】
    【
        代码知识    】
    【
        AI推广    】