防止图像/文件上传后在 create-react-app 中重新加载页面[关闭]答案

【问题标题】：Prevent page reload in create-react-app after image/file upload [closed]防止图像/文件上传后在 create-react-app 中重新加载页面[关闭]
【发布时间】：2020-11-06 13:04:06
【问题描述】：

我正在从“src”文件夹内的文件夹中获取图像（应用程序是使用“create-react-app”创建的）。

节点js服务器
- ...
客户端
- src
  - /图片
  - index.js
  - package.json
  - ...
- 公开

我有表单，提交后会将新图像上传到文件夹 'client/src/images'。在该页面自动重新加载之后。我有用户模型的数据库，这个模型有字符串格式的图像。因此，在提交表单后，会创建一个新图像并将其推送到 '/images' 文件夹中，这会导致页面重新加载。我需要防止这种情况。如何禁用对观看此特定文件夹的反应？或者作为替代，我想在 src 目录之外加载图像。我找到了react-app-rewired，但我真的不明白。

我将不胜感激您的回答/建议！

【问题讨论】：

请添加您实现的内容和方式，请添加一些代码

标签： javascript reactjs webpack create-react-app

【解决方案1】：

这样做，好的，所以你想要做的是从按钮中删除提交类型 <input type="button" value="Basic file Upload"> 或在 onClick 事件而不是在 submit 上调用您的 imageUplaod 函数。
它可以绑定到 webpack ，你可以忽略 images 文件夹：

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

【讨论】：

是你的应用程序配置了 webpack ，因为 webpack 有点监听文件的变化，它会在变化时重新加载应用程序
我说 App 是用 create-react-app 创建的，所以是的，webpack 配置在 node-modules 文件夹中的某个地方
你能检查我的更新吗
感谢您的回答，但是..）是的另一个“但是”xD 我的问题出在 webpack-server 中，它正在监视文件更改。并且当表单提交时，新文件被加载到文件夹中，由服务器监视，因此整个应用程序被重新加载。我需要忽略此特定文件夹或将此文件夹存储在“/client”目录之外，但正如我所写，create-react-app 不允许导入“/src”文件夹之外的文件（
试试这个：module.exports = { devServer: { watchOptions: { ignored: [ path.resolve(__dirname, 'dist'), path.resolve(__dirname, 'node_modules'), path.resolve(__dirname, 'images') // image folder path ] } }, }