从HTML表单向NodeJS应用程序发送发布请求

j8ag8udp  于 2023-06-22  发布在  Node.js
关注(0)|答案(1)|浏览(122)

我做的这个表单有个问题，它没有向下面的node js应用程序发送任何东西。我试着用一个像 Postman 这样的工具来发送请求，它的工作（发送的文件保存在我想要保存的文件夹中），但如果我从表单提交文件，它就不工作了。我对web开发，nodeJS和express都很陌生，我还在学习中。我想上传到index.html的文件被保存在一个名为“上传”的文件夹中。This is the folder organization I'm using
HTML

<!DOCTYPE html>

<html lang="ita">
  <head>
    <!-- style imprort -->
    <link rel="stylesheet" href="style.css" />
    <link rel="icon" type="image/x-icon" href="assets/imgs/temp-icon.png" />

    <!-- script import -->
    <script
      type="text/javascript"
      src="https://code.jquery.com/jquery-latest.js"
    ></script>
    <script src="index-script.js"></script>

    <title>temp-title</title>
  </head>

  <body>
    <form
      method="POST"
      action="/upload"
      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 />
        <!-- aggiungere per accettare solo determinati tipi di file -> accept=".estensione1, .estensione2" -->

        <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 />
        <!-- da impostare come tpye="submit" successivamente -->
        <!-- 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>
  </body>
</html>
  • ——————————————————————————————————————-
    app NodeJS
/* 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.post("/upload", upload.array("file"), (req, res) => {
  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);
  • ——————————————————————————————————————-
    脚本js
/* 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 () {
    window.open("results.html", "_self");
  });

  $("#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];
      // 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();
    });
  });
});
  • ——————————————————————————————————————-
    CSS
@font-face {
  font-family: WorkSans;
  src: url("assets/fonts/WorkSans.ttf");
}
* {
  font-family: "WorkSans";
}

/*---------Chromium---------*/
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #595959;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #f1ca13;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #c19f0b;
}

/*---------Mozilla---------*/
html {
  scrollbar-width: 10px;
  scrollbar-color: #f1ca13 #595959;
}

body {
  background-color: #383838;
  font-weight: 300;
  font-size: 20pt;
  margin: 0px;
  overflow-y: scroll;
}

.form {
  background-color: #383838;
  color: white;

  width: 70vw;
  margin: auto;

  text-align: center;
}

.vert-align {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
}
.content {
  padding-top: 50px;
}

h1 {
  font-size: 60pt;
  color: #f1ca13;
  background-color: #383838;
  margin-bottom: 50px;
}
.first-page {
  margin-top: 40vh;
}

span {
  color: white;
}
ul {
  list-style-type: none;
}
li {
  padding: 15px;
  margin: 15px;
  border: 1px solid #696969;
  cursor: default;
}

.label-style-1 {
  padding: 3px 20px;
  border-radius: 30px;
  border: 3px solid black;
  background-color: black;
  transition: all 200ms linear;
  font-size: 20px;
}
.label-style-1:hover {
  border: 3px solid white;
  background-color: white;
  color: black;
  cursor: pointer;
}

.upload-label {
  width: 150px;
}

.submit-label {
  width: 30px;
}

.pop-head {
  font-size: 25pt;
  color: #f1ca13;
  font-weight: bold;
}

.container2 {
  width: 60vw;
  padding: 40px;

  text-align: left;

  border: 3px solid white;
  border-radius: 10px;
}
.container2 ul {
  display: flex;
  flex-direction: column;
}

.container2 li:hover {
  background-color: #595959;
  cursor: default;
}

.container3 {
  padding: 30px;
}

.container4 {
  display: flex;
  align-items: center;
}

.container5 {
  padding: 15px;
  margin: 15px;
  border: 1px solid #696969;
  cursor: default;
}

.container6 {
  text-align: center;
  width: 44rem;
}

.container7 {
  cursor: pointer;
  width: fit-content;
}

.remove {
  margin-left: auto; /* aligns to the right */
}

/* -------------------------results------------------------- */
.results {
  overflow-y: scroll;
  color: white;
  display: flex;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
}

.file {
  width: fit-content;
  display: inline-block;
}

.details {
  display: inline-block;
  position: relative;
  margin-left: 10px;
  font-size: 10pt;
  color: #f1ca13;
  transition: all 200ms linear;
}

.details:hover {
  color: #b5960f;
}

.details::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: -1px;
  left: 0;
  background-color: #f1ca13;
  transition: transform 100ms linear;
}
.details:hover::after {
  transform: scaleX(1);
  transform-origin: center;
  background-color: #b5960f;
}

.file-box {
  display: none;
  padding: 0 18px;
  position: relative;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}

.input-box {
  position: relative;
  margin-top: 1em;
}

.input-box label {
  position: absolute;
  top: -22px; /* 18px; */
  left: 28px; /* 18px */
  padding: 2px 10px;
  border-left: 1px solid #696969;
  border-right: 1px solid #696969;
  border-top: 1px solid #383838;
  border-bottom: 1px solid #383838;
  border-radius: 6px;
  color: white;
  background-color: #383838;
  transition: all 400ms ease;
}

.input-box input {
  padding: 20px;
  border: 1px solid #696969;
  background: #383838;
  border-radius: 6px;
  outline: none;
  color: white;
  font-size: 0.8em;
}

.input-box input:focus {
  animation: animated-border 1500ms linear infinite;
}

@keyframes animated-border {
  0%,
  100% {
    border: 1px solid #696969;
  }
  50% {
    border: 1px solid #f1ca13;
  }
}

我尝试了很多东西，但我是新来的，我不知道到底要找什么。

node.js

1条答案

按热度按时间
z4bn682m

z4bn682m1#

在你的脚本文件上点击submit按钮，它被重定向到新的html页面，其中已经替换为fetch API调用方法来访问nodeJS端点传递formdata，一旦api返回成功后文件上传就可以重定向到相应的页面。

/* 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();
    });
  });
});

另外，在index.html中删除了form-action属性

<form
  method="POST"
  name="form"
  class="form vert-align"
  enctype="multipart/form-data"
>

在App.js中
Multer上传字段名是不同的upload.array("file")而不是upload.array("files")，这将导致API异常并在api中返回500状态响应。
所以app.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("<h1>Error 404: Resource not found</h1>");
});

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

您可以阅读本文https://blog.logrocket.com/multer-nodejs-express-upload-file/

赞(0）分享  回复(0）举报  2023-06-22
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com