开发环境的自动刷新机制（livereload 或 HMR）惹的祸——上传大量数据时，传了几片后协议从 HTTP 变成了 WS（WebSocket），导致页面重新加载、上传任务中断

你遇到的情况是：

在使用 IDE 自带的 livereload 功能时，上传大量数据时，传了几片后协议从 HTTP 变成了 WS（WebSocket），导致页面重新加载、上传任务中断。

🔍 原因分析

这是一个由 开发环境的自动刷新机制（livereload 或 HMR） 引起的副作用，常见于 Vite、Webpack Dev Server、Browsersync、VSCode Live Server 等工具。

以下是主要原因：

🧠 原因详解

1. livereload 自动建立 WebSocket 连接监控文件变化

• 开发服务器会自动打开一个 WebSocket（例如 ws://localhost:35729）用于监听文件变更；
• 每当你保存文件时，它会通过 WS 通知浏览器刷新页面；
• 你看到协议变化，是 DevTools 捕捉到了 WebSocket 连接建立，而不是上传协议变了。

📌 实际上传仍然是 HTTP 请求；WS 是 livereload 的通信协议，并非上传用的。

2. 上传过程中页面热重载或强制刷新触发

• 如果你正在编辑前端文件（如 JS、CSS）或上传时操作了某些组件，IDE 保存后触发 自动刷新；
• 刷新时，页面会重载，JavaScript 状态（如 Uploader 实例、上传状态）会被清空；
• 所以你的上传任务中断了。

3. 上传文件过大或太频繁，引起 IDE 文件监控异常

• Livereload 工具通常监控整个 project folder；
• 如果你上传的文件被写入本地（如写入 dist/、uploads/、public/），会被 watcher 识别为文件变更；
• 进而触发页面刷新！

🧯 解决方案

✅ 方案 1：禁用 livereload（推荐生产/调试上传时）

• 如果你使用的是 VSCode Live Server：

  • 设置中将 "liveServer.settings.wait" 拉长；
  • 或者关闭自动 reload。

• 也可在启动时添加参数禁用，如：

  live-server --no-browser --quiet --no-css-inject
  

✅ 方案 2：排除上传目录避免触发热重载

• 将上传接口保存的文件不写入 IDE 监控目录中；

• 修改 dev server 的配置，忽略某些文件夹：

  示例（Vite）

  server: {
    watch: {
      ignored: ['**/uploads/**']
    }
  }
  

  Webpack Dev Server

  watchOptions: {
    ignored: /uploads/,
  }
  

✅ 方案 3：使用生产模式单独测试上传接口

• 关闭 HMR / 热重载；
• 手动部署上传前端逻辑，不受 IDE 影响；
• 这样可以稳定验证上传、切片、断点续传等逻辑。

✅ 总结

解决措施：前后端规范化文件结构，我是也一个测试用例代码（大片文件上传，文件组织不当）才出现此情况