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

Question

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

3

我有一个运行在3000端口的React应用程序，我的开发服务器运行在5000端口。我有一个表单（是的，我将按钮设置为onClick事件而不是submit与preventDefault），该表单将信息发送到远程API并将文件发送到我的开发服务器/upload.do，然后发送到我的public/images文件夹。在添加了向服务器上传文件的axios调用后，表单处理得很好，但上传文件时会刷新整个页面。我已经研究过这个问题，似乎这是由于公共文件夹中的更改导致页面刷新。我的server.js使用express-fileupload来处理对localhost/5000/upload.do的api调用。除了刷新页面之外，一切正常，这是我不能容忍的。

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

- anonymous

2个回答

0

你可以尝试使用e.preventDefault();，它用于阻止默认页面重新加载。你可以查看这个链接，处理事件！

- Mamunur Rashid

尝试过了，没有起作用。是文件系统的更改导致了问题...而不是表单的原因。 - anonymous

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tuan Anh Tran · Accepted Answer

您很可能正在使用观察模式运行开发服务器。因此，当您上传文件时，观察程序会检测到磁盘上的某些更改并重新加载。

找到该选项并关闭它。

或者，某些观察程序具有忽略某些文件夹的选项。您可以将图像文件夹添加到忽略列表中。

您提到了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
      ]
    }
  },
  ...
}