为什么 FormData 使用 fetch API 会导致我的屏幕刷新？答案

【问题标题】：Why FormData using with fetch API causing my screen to refresh?为什么 FormData 使用 fetch API 会导致我的屏幕刷新？
【发布时间】：2019-11-27 14:31:00
【问题描述】：

我使用 fetch API 和 FormData API 将文件发送到后端（用 Express JS 编写）。我的应用程序运行良好。但是在点击发送按钮后，我的页面正在刷新，即使我没有使用任何 HTML 表单元素。

我在发送按钮事件监听器函数回调中删除了 FormData，之后页面没有刷新。我还删除了 fetch api 调用但保留了 FormData，然后页面也没有刷新。但是一起使用它们时，页面会刷新。

前端代码：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Code Analyzer</title>
  </head>
  <body>
    <h1>Insert the Code File here</h1>

     <input type="file" name="myFile" />
        <button class="btn">Send</button>
      </body>
      <script>
        //Get the DOM elments
        const btn = document.querySelector(".btn");
        let input = document.querySelector('input[type="file"]');
        let formData = new FormData();

        btn.addEventListener("click", e => {
          e.preventDefault();
          formData.append("myFile", input.files[0]);
          console.log(formData);

          fetch("http://localhost:9000/analyze", {
            method: "POST",
            body: formData
          })
            .then(data => data.json())
            .then(res => console.log(res))
            .catch(err => console.log(err));
        });
      </script>
    </html>

后端代码：

//Importing Packages
const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const multer = require("multer");
const app = express();

//Configuring Multer
const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, "uploads");
  },
  filename: function(req, file, cb) {
    cb(null, file.fieldname + "-" + Date.now());
  }
});

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

//Middlewares
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());

//Routes
app.post("/analyze", upload.single("myFile"), (req, res) => {
  console.log(req.file);
  res.json({ Analyzed: "Yes" });
});

//Server Listening
app.listen(9000, () => {
  console.log("Server started on 9000");
});

【问题讨论】：

欢迎来到 StackOverflow！只是一个想法-您是否尝试在<button class="btn">Send</button> 上添加type="button"？
谢谢@msbarnard。但它已经是一个普通的按钮。我认为它不会导致其行为发生任何变化。
@msbarnard。只是为了一试。我确实添加了 type="button"。没有任何改变。
我建议使用正确的<form> 并收听其submit 事件，但不知道为什么您当前的设置不起作用。
@Bergi 谢谢。
也试过了。将输入文件和按钮包装在

中。还尝试将按钮类型更改为提交。但仍然是同样的问题。

标签： javascript node.js express ecmascript-6 fetch

【解决方案1】：

我在使用 create-react-app 时遇到了同样的问题，我在创建生产仓库后执行 serve -s build，当我尝试查看问题时，它就消失了。我发现这是在开发者模式下发生的。

【讨论】：