JavaScript利用切片实现大文件断点续传

下面我将为你详细讲解“JavaScript利用切片实现大文件断点续传”的完整攻略。

什么是大文件断点续传？

大文件断点续传是指在上传或下载大文件时，当中途发生网络异常或操作中断等情况，可以暂停传输并记录已传输的数据，下次继续传输时从中断处开始传输，避免重新传输整个文件。

实现大文件断点续传的原理

大文件断点续传的实现原理是将大文件切分成若干个小部分即“分片”，然后将每个分片单独进行上传或下载操作，上传或下载完成后记录已上传或下载的部分，下次继续上传或下载时先检查哪些分片已经传输完成，只对未传输完成的分片进行上传或下载操作。

实现大文件断点续传的步骤

1. 读取待上传的文件内容，获取文件总大小和分片大小。
   javascript
const file = document.querySelector('#file').files[0];
const fileSize = file.size;
const shardSize = 5 * 1024 * 1024; // 分片大小为5MB
const shardCount = Math.ceil(fileSize / shardSize);
2. 利用 Blob 对象和 slice() 方法将文件切片。
   javascript
const shardList = [];
let startByte = 0;
for (let i = 0; i < shardCount; i++) {
const shard = file.slice(startByte, startByte + shardSize);
shardList.push(shard);
startByte += shardSize;
}
3. 利用 XMLHttpRequest 对象进行上传或下载操作，对每个分片分别进行操作。
   ```javascript
   const xhr = new XMLHttpRequest();
   xhr.open('POST', '/upload', true);
   xhr.setRequestHeader('Content-Type', 'application/octet-stream');

let shardIndex = 0;
xhr.upload.addEventListener('progress', (event) => {
const shardProgress = ((event.loaded / shardSize) * 100).toFixed(2);
console.log(第 ${shardIndex} 分片上传进度：${shardProgress}%);
}, false);

xhr.onload = () => {
console.log(第 ${shardIndex} 分片上传完成。);
shardIndex++;
if (shardIndex < shardCount) {
upload(shardIndex);
}
};

xhr.onerror = (error) => {
console.error(第 ${shardIndex} 分片上传失败。, error);
};

const upload = (index) => {
xhr.send(shardList[index]);
};

upload(0);
```
4. 记录已上传或下载的分片信息，下次继续上传或下载时先检查哪些分片已经传输完成，只对未传输完成的分片进行上传或下载操作。

示例说明

下面是两个使用 JavaScript 实现大文件断点续传的示例，一个是上传示例，一个是下载示例。

上传示例

HTML 页面代码：

<input type="file" id="file">
<button onclick="upload()">上传文件</button>

JavaScript 代码：

const upload = () => {
  const file = document.querySelector('#file').files[0];
  const fileSize = file.size;
  const shardSize = 5 * 1024 * 1024; // 分片大小为5MB
  const shardCount = Math.ceil(fileSize / shardSize);

  const shardList = [];
  let startByte = 0;
  for (let i = 0; i < shardCount; i++) {
    const shard = file.slice(startByte, startByte + shardSize);
    shardList.push(shard);
    startByte += shardSize;
  }

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.setRequestHeader('Content-Type', 'application/octet-stream');

  let shardIndex = 0;
  xhr.upload.addEventListener('progress', (event) => {
    const shardProgress = ((event.loaded / shardSize) * 100).toFixed(2);
    console.log(`第 ${shardIndex} 分片上传进度：${shardProgress}%`);
  }, false);

  xhr.onload = () => {
    console.log(`第 ${shardIndex} 分片上传完成。`);
    shardIndex++;
    if (shardIndex < shardCount) {
      upload(shardIndex);
    }
  };

  xhr.onerror = (error) => {
    console.error(`第 ${shardIndex} 分片上传失败。`, error);
  };

  const upload = (index) => {
    xhr.send(shardList[index]);
  };

  upload(0);
};

下载示例

HTML 页面代码：

<progress id="progress" value="0" max="100"></progress>
<button onclick="startDownload()">下载文件</button>

JavaScript 代码：

let downloadedShardCount = 0;

const startDownload = () => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/download', true);

  xhr.onreadystatechange = () => {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      const totalSize = Number(xhr.getResponseHeader('Content-Length'));
      const shardSize = 5 * 1024 * 1024; // 分片大小为5MB
      const shardCount = Math.ceil(totalSize / shardSize);

      for (let i = 0; i < shardCount; i++) {
        const startByte = i * shardSize;
        const endByte = Math.min((i + 1) * shardSize - 1, totalSize - 1);
        requestDownload(startByte, endByte);
      }
    }
  };

  xhr.send();
};

const requestDownload = (start, end) => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/download', true);
  xhr.setRequestHeader('Range', `bytes=${start}-${end}`);

  xhr.onreadystatechange = () => {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      downloadedShardCount++;

      // 计算已下载的分片占总分片数的百分比
      const progress = ((downloadedShardCount / shardCount) * 100).toFixed(2);

      // 更新进度条的进度
      const progressBar = document.querySelector('#progress');
      progressBar.value = progress;

      if (downloadedShardCount === shardCount) {
        console.log('文件下载完成。');
      }
    }
  };

  xhr.send();
};

以上便是利用切片实现大文件断点续传的完整攻略，并且提供了两个 JavaScript 示例，一个是上传示例，一个是下载示例。注意使用时需要将上传和下载的 URL 地址改为自己的服务器地址。