使用HTML表单向Node.js应用发送POST请求的文件上传教程

<form
  method="POST"
  name="form"
  class="form vert-align"
  enctype="multipart/form-data"
>
  <!-- 表单内容 -->
</form>

/* 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(
      "<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 < event.target.files.length; i++) {
      $("ul").append(
        "<li><div class='container4'><span href='" +
          event.target.files[i] +
          "' download>" +
          event.target.files[i].name +
          " (" +
          numberWithDots(Math.floor(event.target.files[i].size / 1024 + 1)) +
          " KB)</span>    " +
          "<label for='remove" +
          i +
          "' class='label-style-1 remove' id='lab" +
          i +
          "'>REMOVE</label>" +
          "<input type='button' id='remove" +
          i +
          "' name='remove" +
          i +
          "' hidden>" +
          "</div></li>"
      );
    }

    /* 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 <li> corrispondente dall'elenco
      $(this).closest("li").remove();
    });
  });
});

/* 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("<h1>Error 404: Resource not found</h1>");
});

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

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