node.js - 将文件上传到开发服务器后如何防止页面重新加载？

Question

我有一个 react 应用程序在端口 3000 上运行，而我的开发服务器在端口 5000 上运行。我有一个表单(是的，我将按钮设置为 onClick 事件，而不是使用 preventDefault 提交)，它将信息发送到远程 API 和一个文件到我的开发服务器/upload.do，然后到我的 public/images 文件夹。在我将文件上传添加到服务器 axios 调用之前，表单处理得很好，现在一旦文件上传发生，它就会刷新整个页面。我已经对此进行了研究，这似乎是由导致页面刷新的公用文件夹中的更改引起的。我的 server.js 使用 express-fileupload 来处理对 localhost/5000/upload.do 的 api 调用。一切正常，只是它刷新了我的页面，这是我不可能发生的。

我的问题是:在将文件上传到我的 public/images 文件夹时如何阻止页面刷新？

Answer 1

您的开发服务器可能处于监视模式。因此，当您上传文件时，观察器会检测到磁盘上的某些变化并重新加载。

找到该选项并将其关闭。

或者，一些观察者可以选择忽略某些文件夹。您可以将该图像文件夹添加到忽略列表。

你提到了 React 应用程序，所以我认为你可以使用 webpack-dev-server？

要禁用某些文件/文件夹的监视模式，请这样做

const path = require('path')

module.exports = {
  ...
  devServer: {
    watchOptions: {
      ignored: [
        path.resolve(__dirname, 'dist'),
        path.resolve(__dirname, 'node_modules'),
        path.resolve(__dirname, 'images') // image folder path
      ]
    }
  },
  ...
}