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

Question

我有一个在端口 3000 上运行的 React 应用程序，而我的开发服务器在端口 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
      ]
    }
  },
  ...
}