js断点续传

前端实现断点续传主要分为以下几个步骤；

在前端实现断点续传通常涉及以下几个步骤：

1. 分片上传：将要上传的文件分割成多个较小的块（片段），例如使用File API的slice()方法将文件切割为多个部分。

2. 上传并保存已上传的片段：将每个片段通过AJAX或其他适当的方式上传到服务器，并在服务器端保存这些片段。服务器端可以为每个片段分配一个唯一的标识符。

3. 断点记录：在前端，需要记录已成功上传的片段信息。可以使用localStorage或cookie等方式将片段标识符保存在客户端，以便在续传时进行参考。

4. 续传处理：当用户需要续传文件时，前端需要读取断点记录并向服务器发送请求，请求包含已上传的片段信息。

5. 服务器端处理：服务器收到续传请求后，根据客户端提供的已上传片段信息，判断哪些片段已经上传过，然后继续上传剩余的片段。

6. 合并文件：在服务器端将所有片段合并为完整的文件。一旦文件完整合并，可以删除已上传的片段。

7. 完成上传：通知客户端文件上传完成，可以进行进一步的处理或展示。

具体实现方式可能因应用场景和技术栈的不同而有所变化。

以axios库来举例
html

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

javascript

var fileInput = document.getElementById('fileInput');
var file = null;
var fileSize = 0;
var chunkSize = 1024 * 1024; // 每个片段的大小，这里设置为1MB
var startByte = 0; // 从文件的哪个位置开始上传
var uploadUrl = '/upload';

fileInput.addEventListener('change', function(event) {
  file = event.target.files[0];
  fileSize = file.size;
});

function uploadFile() {
  if (!file) {
    alert('请选择一个文件');
    return;
  }

  var chunk = file.slice(startByte, startByte + chunkSize);
  var formData = new FormData();
  formData.append('chunk', chunk);
  formData.append('fileName', file.name);
  formData.append('fileSize', fileSize);
  formData.append('startByte', startByte);

  axios.post(uploadUrl, formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    onUploadProgress: function(progressEvent) {
      var progress = Math.round((startByte + progressEvent.loaded) * 100 / fileSize);
      console.log('上传进度: ' + progress + '%');
    }
  }).then(function(response) {
    var data = response.data;
    if (data.status === 'success') {
      startByte += chunkSize;
      if (startByte < fileSize) {
        // 将续传的位置存储到localStorage
        localStorage.setItem('uploadPosition', startByte);
        uploadFile();
      } else {
        localStorage.removeItem('uploadPosition');
        alert('文件上传完成');
      }
    } else {
      alert('文件上传失败');
    }
  }).catch(function(error) {
    alert('发生错误：' + error.message);
  });
}

// 页面加载时检查是否存在续传位置
window.addEventListener('DOMContentLoaded', function() {
  var uploadPosition = localStorage.getItem('uploadPosition');
  if (uploadPosition) {
    startByte = parseInt(uploadPosition);
    uploadFile();
  }
});