reactjs页面在文件上传时重新加载

Question

我正在尝试从表单发送图像以响应后端，但如果 FormData 足够大（到目前为止我能够发送超过 1MB 的图像）它会取消 axios 发布请求并重新加载页面。

后端配置为将图像存储在 react 文件夹（/client/public/uploads）中，所以问题可能是 react 会自行重新加载，但是为什么小图像会通过呢？

控制台没有错误。唯一的提示是带有

的网络选项卡

添加（取消）xhr bundle.js:2113 0 B 581 毫秒

那么我应该怎么做才能在不取消的情况下传递数据？

上传文件夹中的文件已损坏

编辑：我发现了一件有趣的事情：即使我使用邮递员上传文件，前端页面也会重新加载。我的猜测是我的浏览器因此取消了发布请求。所以问题是当我在反应子文件夹中创建图像时如何停止重新加载页面的反应？

Answer 1

不确定这是否正确，但我的解决方案是将文件存储在后端，因此不会重新加载 react 并使用 express 提供文件

Answer 2

天哪，我想我知道你的问题是什么......

您是否使用热重载？也许 webpack DevServer - 或您使用的任何东西 - 正在侦听更改的文件，如果发生更改（在您的情况下添加了图像），它将重新加载页面。

如果你使用webpack DevServer，只需将图片文件夹路径添加到watch ignore list：

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

否则，您可以在构建应用后检查生产环境中是否也会发生这种情况...