前端大文件断点续传的突破

2023-11-19 21:27:46

今天看到几位大佬写的关于前端大文件上传的文章，感觉这个功能还挺有意思的。我试了试，在他们的代码上添加了一些自己的想法。这篇文章算是一个自己的总结，也希望能给想做这个功能的同学一些帮助。

为什么要进行断点续传？

在日常生活中，我们经常会遇到需要上传大文件的情况，比如上传视频、图片、压缩包等。如果文件比较小，可以直接一次性上传完成。但如果文件比较大，比如超过100M，一次性上传可能会失败。这是因为网络不稳定、浏览器崩溃、服务器故障等因素，都可能导致上传中断。

断点续传功能可以解决这个问题。它允许我们在文件上传中断后，从断点处继续上传，而不用重新上传整个文件。这可以大大提高上传速度，并减少上传失败的风险。

如何实现断点续传？

实现断点续传的方法有很多，这里介绍一种比较简单的方法：分片上传。

分片上传是指将大文件分割成多个小块，然后逐个上传这些小块。每个小块称为一个分片。当所有分片都上传完成之后，服务器将这些分片重新组合成一个完整的文件。

分片上传的优点是，它可以将大文件分割成多个小块，从而减少每个请求的数据量。这可以降低网络拥塞的风险，并提高上传速度。此外，分片上传还可以支持断点续传。如果在上传过程中发生中断，我们可以从断点处继续上传，而不用重新上传整个文件。

实现细节

这里简单介绍一下如何实现断点续传功能。

首先，我们需要将大文件分割成多个小块。我们可以使用JavaScript的FileReader对象来读取文件，并使用slice()方法来将文件分割成小块。

const file = document.getElementById('file').files[0];
const chunkSize = 1024 * 1024; // 每个分片的大小为1MB
const chunks = [];
for (let i = 0; i < file.size; i += chunkSize) {
  const chunk = file.slice(i, i + chunkSize);
  chunks.push(chunk);
}

然后，我们需要逐个上传这些小块。我们可以使用AJAX请求来上传小块。在每个请求中，我们需要指定小块的序号和大小。服务器收到请求后，将小块存储在临时目录中。

const xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.send(chunks[0]);

当所有分片都上传完成之后，服务器将这些分片重新组合成一个完整的文件。然后，服务器将文件保存到指定的位置。

$tempDir = 'temp/';
$file = fopen($tempDir . $fileName, 'w');
foreach ($chunks as $chunk) {
  fwrite($file, $chunk);
}
fclose($file);

rename($tempDir . $fileName, 'uploads/' . $fileName);