Web中上传大文件时如何实现断点续传？ 在Web开发里，上传大文件是常有的需求，但大文件上传过程中可能会因网络波动、设备故障等问题中断。要是重新上传，那之前上传的部分就白费了，既浪费时间又浪费流量。这时候，断点续传就显得尤为重要。它能让文件在上传中断后，从上次中断的地方继续上传，大大提升上传效率。那么，Web中上传大文件时究竟该如何实现断点续传呢？接下来就为大家详细介绍完整方案。
断点续传的原理 要实现断点续传，得先明白它的原理。可以把文件上传想象成一场马拉松比赛。文件就是参赛选手，服务器是终点。在传统的文件上传里，选手必须一口气从起点跑到终点，中途不能停歇。一旦中途因为各种原因停下来了，那就得回到起点重新跑。而断点续传呢，就像是给选手设置了多个补给站。选手跑到某个补给站后，可以在这里休息、补充能量，之后再从这个补给站接着跑，不用回到起点重新开始。 在技术层面，断点续传是把大文件分割成多个小块，每个小块都有自己的编号。上传时，依次上传这些小块。服务器收到小块后，会记录下已经接收的小块编号。如果上传中断，下次上传时，客户端会根据服务器记录的信息，只上传未上传的小块，从而实现断点续传。
实现断点续传的步骤
-
文件切片：把大文件分割成多个小块。这就好比把一大块蛋糕切成许多小块，方便一口一口地吃。可以使用www.ysdslt.com/JavaScript的Blob对象的slice方法来实现文件切片。以下是示例代码： javascript const file = document.getElementById('fileInput').files[0]; const chunkSize = 1024 * 1024; // 每个小块的大小为1MB let chunks = []; for (let start = 0; start let end = Math.min(start + chunkSize, file.size); let chunk = file.slice(start, end); chunks.push(chunk); }
-
生成唯一标识：为每个文件生成一个唯一的标识，方便服务器区分不同的文件。可以使用文件的哈希值作为唯一标识。以下是示例代码： javascript const crypto = require('crypto'); const fs = require('fs'); const file = document.getElementById('fileInput').files[0]; const reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = function () { const buffer = new Uint8Array(reader.result); const hash = crypto.createHash('sha256').update(buffer).digest('hex'); console.log('文件哈希值:', hash); };
-
上传小块：依次上传分割好的小块，并携带小块的编号和文件的唯一标识。可以使用XMLHttpRequest或fetch API来实现文件上传。以下是使用fetch API上传小块的示例代码： javascript const uploadChunk = async (chunk, chunkIndex, fileHash) => { const formData = new FormData(); formData.append('chunk', chunk); formData.append('chunkIndex', chunkIndex); formData.append('fileHash', fileHash); const response = await fetch('/upload', { method: 'POST', body: formData }); return response.json(); };
-
服务器处理：服务器收到小块后，要记录下已经接收的小块编号。可以使用数据库或文件系统来记录这些信息。以下是使用Node.js和Express框架处理文件上传的示例代码： javascript const express = require('express'); const app = express(); const multer = require('multer'); const upload = multer(); const fs = require('fs'); const path = require('path'); app.post('/upload', upload.single('chunk'), (req, res) => { const chunk = req.file.buffer; const chunkIndex = parseInt(req.body.chunkIndex); const fileHash = req.body.fileHash; const filePath = path.join(__dirname, 'uploads', fileHash,
chunk_${chunkIndex}); fs.writeFileSync(filePath, chunk); res.json({ success: true }); }); app.listen(3000, () => { console.log('服务器启动，监听端口3000'); }); -
断点续传：如果上传中断，下次上传时，客户端要根据服务器记录的信息，只上传未上传的小块。可以在客户端维护一个已上传小块的列表，每次上传前检查哪些小块还未上传。以下是示例代码： javascript const resumeUpload = async (file, fileHash) => { const response = await fetch(
/checkUpload?fileHash=${fileHash}); const { uploadedChunks } = await response.json(); const chunkSize = 1024 * 1024; // 每个小块的大小为1MB let chunks = []; for (let start = 0; start let end = Math.min(start + chunkSize, file.size); let chunk = file.slice(start, end); chunks.push(chunk); } for (let i = 0; i if (!uploadedChunks.includes(i)) { await uploadChunk(chunks[i], i, fileHash); } } }; -
合并文件：所有小块都上传完成后，服务器要把这些小块合并成一个完整的文件。可以按小块的编号顺序依次读取小块文件，然后写入一个新的文件。以下是示例代码： javascript const mergeChunks = async (fileHash) => { const chunksDir = path.join(__dirname, 'uploads', fileHash); const chunkFiles = fs.readdirSync(chunksDir).sort((a, b) => { const indexA = parseInt(a.split('')[1]); const indexB = parseInt(b.split('')[1]); return indexA - indexB; }); const outputPath = path.join(__dirname, 'uploads',
${fileHash}.pdf); const outputStream = fs.createWriteStream(outputPath); for (let chunkFile of chunkFiles) { const chunkPath = path.join(chunksDir, chunkFile); const chunkStream = fs.createReadStream(chunkPath); await new Promise((resolve, reject) => { chunkStream.pipe(outputStream, { end: false }); chunkStream.on('end', resolve); chunkStream.on('error', reject); }); } outputStream.end(); };
注意事项 在实现断点续传时，有一些地方需要注意。首先，文件切片的大小要根据实际情况进行调整。如果切片太小，会增加上传的次数，影响上传效率；如果切片太大，一旦上传中断，需要重新上传的部分就会很多。其次，要确保文件的唯一标识是可靠的，避免不同文件使用相同的标识。最后，服务器要处理好并发上传的情况，避免出现数据混乱。
总结 通过上述步骤，就可以在Web中实现大文件的断点续传。文件切片、生成唯一标识、上传小块、服务器处理、断点续传和合并文件，这些步骤环环相扣，共同构成了完整的断点续传方案。掌握了这个方案，就能轻松应对大文件上传的问题，让文件上传更加高效、稳定。
