基于 Node.js 和 Multer 实现前端文件上传的完整指南-js教程-PHP中文网

基于 Node.js 和 Multer 实现前端文件上传的完整指南

霞舞

发布： 2025-11-17 22:14:02

原创

395人浏览过

基于 Node.js 和 Multer 实现前端文件上传的完整指南

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

登录后复制

说明:

码上飞

码上飞（CodeFlying）是一款AI自动化开发平台，通过自然语言描述即可自动生成完整应用程序。

138

查看详情

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

以上就是基于 Node.js 和 Multer 实现前端文件上传的完整指南的详细内容，更多请关注php中文网其它相关文章！