想象一下小明，一个热爱摄影的程序员。周末去爬山拍了一堆4K高清照片，总共3GB，准备发给老婆分享。微信传？算了压缩后画质渣得像像素风。网盘？离线状态下连不上。蓝牙？慢得像蜗牛在跑步。你急得团团转，突然灵机一动：用电脑直接传啊！可是怎么在浏览器里实现局域网P2P大文件传输，还得支持断点续传？别急，今天咱们就聊聊这个技术方案。

P2P传输在局域网里其实挺常见的，BT下载就是经典案例。但咱们今天聊的是纯前端实现，意思是完全不用后端服务器，用户A直接把文件传给用户B。核心技术是WebRTC，这货本来是用来视频聊天的，但咱们Ke以拿来传文件。

为什么选WebRTC？因为它支持数据通道，Ke以直接在浏览器间建立连接。加上File API和Blob，咱们就Neng把大文件切成小块，边传边收，断点续传自然就出来了。

浏览器处理大文件有个硬伤：内存限制。Ru果直接把3GB文件读进内存，Chrome得哭爹喊娘。所以咱们用FileReader分块读：

// 文件分块函数function chunkFile { // 1MB每块  const chunks = ;  let offset = ;    while  {    const chunk = file.slice;    chunks.push;    offset += chunkSize;  }    return chunks;}

这里用file.slice切块，每个块1MB。为什么要1MB？平衡传输效率和内存占用，太小网络开销大，太大浏览器卡。

WebRTC连接需要信令服务器，但咱们是离线局域网，所以Ke以用WebSocket或者直接用浏览器本地存储交换SDP。

// 创建RTCPeerConnectionconst pc = new RTCPeerConnection;// 创建数据通道const dataChannel = pc.createDataChannel;// 监听连接事件dataChannel.onopen =  => console.log;dataChannel.onmessage = handleMessage;

断点续传的关键是记录Yi传块的进度。用IndexedDB或者localStorage存进度：

// 发送文件块async function sendFileChunks {  const chunks = chunkFile;  const progress = loadProgress || ; // 从本地加载进度    for  {    const chunk = chunks;    const arrayBuffer = await chunk.arrayBuffer;        // 发送块数据，带上索引    dataChannel.send);        saveProgress; // 保存进度  }    // 发送结束信号  dataChannel.send);}

接收端收到块后先存到临时数组，收到'end'信号再合并成完整文件。

Chrome对单个文件上传有限制，默认是2GB。有些版本甚至geng低。遇到大文件怎么办？继续分块，但块数太多会影响性Neng。

解决方案：用File System Access API，Ke以直接操作本地文件系统，绕过内存限制。

// 使用File System Access APIconst fileHandle = await window.showOpenFilePicker;const file = await fileHandle.getFile;const writableStream = await fileHandle.createWritable;// 分块写入for  {  await writableStream.write;}await writableStream.close;

网络限制：公司局域网可Neng有防火墙，WebRTC的UDP连接会被挡。解决方案：降级到WebSocket，或者用TURN服务器中转。

"我之前Zuo的一个家庭相册App，用这个技术实现了局域网照片同步。妈妈在客厅电脑上传相册，爸爸在卧室就Neng直接收到，不用连路由器。"