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

Question

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

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

标签： node.jsreactjsexpressfile-upload

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
      ]
    }
  },
  ...
}