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

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

找到该选项并将其关闭。

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

您提到反应应用程序，所以我认为您可以使用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
      ]
    }
  },
  ...
}

Answer 2

您可以尝试e.preventDefault();，它用于停止默认页面的重新加载。您可以看到此链接Handling Events！

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

2 个答案: