本文旨在解决HTML表单无法正确向Node.js应用发送文件的问题。通过修改前端JavaScript代码，使用Fetch API发送FormData，并调整Node.js后端Multer配置，确保文件能够成功上传到指定目录。本文将详细介绍前端HTML、JavaScript代码的修改，以及后端Node.js代码的配置，并提供完整的代码示例，帮助开发者快速实现文件上传功能。

前端HTML表单的配置

首先，确保HTML表单的enctype属性设置为multipart/form-data，这是文件上传的关键。同时，移除form标签中的action属性，因为我们将使用JavaScript的Fetch API来处理表单提交。

前端JavaScript代码的修改

原始的JavaScript代码尝试通过直接提交表单来上传文件，但这种方式存在一些问题。我们需要修改JavaScript代码，使用Fetch API来异步发送FormData。

以下是修改后的JavaScript代码：

/* regular expression to show thousand separator */
function numberWithDots(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
let myFiles;
let formData = new FormData();

$(document).ready(function () {
  $("#cancel").on("click", function () {
    location.reload();
  });

  $("#submit").on("click", function (e) {
    e.preventDefault();

    fetch("http://localhost:3000/upload", {
      method: 'POST',
      body: formData
    })
      .then((res) => console.log(res))
      .catch((err) => ("Error occured", err));
  });

  $("#file").on("change", (event) => {
    myFiles = event.target.files;

    for (let i = 0; i < myFiles.length; i++) {
      let file = myFiles[i];
      formData.append("files", file, file.name);
    }

    /* 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 < event.target.files.length; i++) {
      $("ul").append(
        "
" +
          event.target.files[i].name +
          " (" +
          numberWithDots(Math.floor(event.target.files[i].size / 1024 + 1)) +
          " KB)    " +
          "REMOVE" +
          "" +
          "
"
      );
    }

    /* removes upload file button */
    $(".upload-label").remove();
    $("#file").remove();
    /* shows OK & CANCEL buttons */
    $(".submit-label").show();
    $(".cancel-label").show();

    ///* TO IMPLEMENT SERVER SIDE *///
    $(".remove").on("click", function () {
      let index = $(this).attr("id").replace("lab", "");
      let fileToRemove = this.files[index];
      let z = [];
      for (let i = 0; i < myFiles.length; i++) {
        const file = myFiles[i];
        if (file.name !== fileToRemove.name) {
          z.push(file)
        }
      }
      myFiles = z;

      // Esegui l'azione di rimozione del file qui
      console.log("File da rimuovere:", fileToRemove);
      // Rimuovi l'elemento 
 corrispondente dall'elenco
      $(this).closest("li").remove();
    });
  });
});

关键修改：

1. 阻止表单的默认提交行为：在#submit的click事件处理函数中，使用e.preventDefault();阻止表单的默认提交行为。
2. 使用Fetch API发送FormData：使用fetch函数向Node.js后端发送POST请求，并将formData作为请求体。

后端Node.js代码的配置

在Node.js后端，我们需要使用multer中间件来处理文件上传。确保multer的配置与前端FormData的字段名一致。

以下是修改后的Node.js代码：

/* modules necessary */
const express = require("express");
const path = require("path");
const multer = require("multer");

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "uploads");
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + "-" + path.basename(file.originalname));
  },
});

const upload = multer({ storage: storage });

/* new instance of express object */
const app = express();

app.use(express.static(path.join(__dirname, "public")));

app.get("/",(req,res)=>{
    res.sendFile(__dirname+'/public/assets/index.html')
})

app.post("/upload", upload.array("files"), (req, res) => {
  console.log(req);
  res.send("Uploaded");
});

/* handles all requests without a corresponding route */
app.use((req, res) => {
  res.status(404);
  res.send("
Error 404: Resource not found
");
});

/* where the app is hosted */
app.listen(3000);

关键修改：

1. 修改multer的字段名：将upload.array("file")修改为upload.array("files")，确保与前端FormData的字段名files一致。

目录结构

确保你的目录结构如下：

- app.js
- public/
  - index.html
  - index-script.js
  - style.css
  - assets/
    - imgs/
      - temp-icon.png
    - fonts/
      - WorkSans.ttf
- uploads/

注意事项

• 确保Node.js应用已安装express和multer：npm install express multer
• 前端代码中的fetch请求地址http://localhost:3000/upload需要与你的Node.js应用监听的端口和路由一致。
• uploads文件夹需要存在，并且Node.js应用有写入权限。
• 在实际生产环境中，需要对上传的文件进行安全验证，例如文件类型、大小等。

总结

通过以上修改，你应该能够成功地使用HTML表单向Node.js应用发送POST请求，并上传文件到指定目录。关键在于前端使用Fetch API发送FormData，后端使用Multer中间件处理文件上传，并确保前后端配置的字段名一致。希望本教程能够帮助你解决文件上传问题。