浏览器上js如何实现上传大文件页面刷新后断点续传？

思路很简单，就是将大文件分块切割列出一个编号和清单，然后设置并发数同时上传发给后端，后端根据分块和编号清单数据最后组装还原成原始的大文件，上传的过程中将已完成的批次保存到localstorage中，下次刷新后直接发送未完成部分。

示例代码:

前端 JavaScript 代码:

document.getElementById('fileUpload').addEventListener('change', handleFileSelect, false);

function handleFileSelect(event) {
  const file = event.target.files[0];
  const chunkSize = 1024 * 1024; // 比如我们设定每个分块的大小为1MB。
  let chunks = Math.ceil(file.size / chunkSize);
  let currentChunk = 0;
  const concurrency = 3; // 并发上传的数目。
  let offset = 0; // 用于记录当前并发上传块的位置。

  // 读取localStorage中的上传进度。
  function getUploadProgress() {
    let progress = localStorage.getItem(file.name);
    return progress ? parseInt(progress, 10) : 0;
  }

  // 保存上传进度到localStorage。
  function saveUploadProgress(chunk) {
    localStorage.setItem(file.name, chunk.toString());
  }

  // 创建分块上传的函数。
  function uploadChunk(chunk) {
    var start = chunk * chunkSize;
    var end = Math.min(file.size, start + chunkSize);
    var formData = new FormData();
    formData.append('file', file.slice(start, end)); // 获取文件的某个片段。
    formData.append('fileName', ...

点击查看剩余70%