// 监听网络断开
window.addEventListener('offline', () => {
  console.log('网络已断开，暂停上传');
  pauseUpload(); // 触发上传暂停逻辑
});


// 监听网络恢复
window.addEventListener('online', () => {
  console.log('网络已恢复，尝试继续上传');
  resumeUpload(); // 触发续传逻辑
});

React 结合Hooks来实现
使用 useEffect 进行事件绑定 / 解绑，确保与组件生命周期同步
初始状态通过 navigator.onLine 获取，避免初始值与实际状态不一致

import { useState, useEffect } from 'react';


function NetworkStatus() {
  // 状态管理：是否在线
  const [isOnline, setIsOnline] = useState(navigator.onLine);


  useEffect(() => {
    // 定义事件处理函数
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);


    // 绑定事件监听
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);


    // 组件卸载时清除监听（避免内存泄漏）
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []); // 空依赖数组：只在组件挂载时执行一次


  return (
    <div>
      <p>网络状态：{isOnline ? '在线' : '离线'}</p>
    </div>
  );
}

2. 请求层面的异常捕获
   即使网络未完全断开（如弱网超时），单个切片上传请求也可能失败，需在 fetch 或 axios 中捕获异常：

async function uploadChunk(chunk) {
  try {
    const response = await fetch('/upload-chunk', {
      method: 'POST',
      body: chunk.formData,
    });
    if (!response.ok) throw new Error('请求失败');
    return { success: true, chunkIndex: chunk.index };
  } catch (error) {
    console.log(`切片 ${chunk.index} 上传失败`, error);
    return { success: false, chunkIndex: chunk.index };
  }
}

二、断网时的核心处理逻辑

断网后需保存当前上传状态，为后续续传提供依据：

1. 保存上传进度状态
   将已上传的切片信息、文件元数据等保存到本地存储（如 localStorage 或 IndexedDB，后者更适合大量数据）：

2. 暂停上传队列
   如果使用并发上传（如同时上传3个切片），断网后需终止当前正在进行的请求，并清空等待队列：

let uploadQueue = []; // 等待上传的切片队列
let activeRequests = []; // 当前正在进行的请求


function pauseUpload() {
  // 终止所有活跃请求
  activeRequests.forEach(abortController => abortController.abort());
  // 清空队列（后续续传时重新生成）
  uploadQueue = [];
}

3. 用户体验提示
   向用户展示明确的状态提示（如“网络已断开，已保存上传进度”），避免用户误以为上传失败或需要重新开始。

三、网络恢复后的续传逻辑

网络恢复后，核心是基于已保存的状态，仅上传未完成的切片：

1. 恢复上传状态
   从本地存储中读取之前保存的 uploadState，确认文件信息和已上传切片：

async function getSavedState(fileId) {
  return indexedDB.transaction('r', db.uploadStates, () => {
    return db.uploadStates.get(fileId);
  });
}

2. 与服务端校验已上传切片
   为避免本地状态与服务端不一致（如断网时某切片已上传成功但前端未记录），需向服务端查询当前文件已接收的切片：

async function getServerUploadedChunks(fileId) {
  const response = await fetch(`/get-uploaded-chunks?fileId=${fileId}`);
  return response.json(); // 服务端返回已接收的切片索引数组
}

3. 生成待上传切片队列
   对比本地已上传切片和服务端返回的切片，计算出未上传的切片，生成新的上传队列：

4. 继续上传未完成切片
   按原有的并发策略（如同时上传3个），逐个上传 pendingChunks 中的切片，并实时更新本地状态和服务端记录。