js自己实现一个大文件切片上传+断点续传的示例代码

下面是关于“js自己实现一个大文件切片上传+断点续传的示例代码”的完整攻略。

1. 实现思路

1. 将大文件分为多个小文件，每个小文件的大小在10-20MB左右。
2. 设置上传进度条。
3. 判断上传文件是否第一次上传，如果是则上传整个文件，如果不是则上传未上传过的部分文件。
4. 将上传成功的文件进行标记，下次上传时跳过这些已经上传成功的文件。

2. 实现步骤

2.1 分割文件

使用File.slice方法将大文件分为多个小文件。示例代码如下：

function sliceFile(file) {
  let fileSize = file.size;  // 获取文件大小
  let chunkSize = 1024 * 1024 * 10;  // 每个小文件的大小
  let chunks = Math.ceil(fileSize / chunkSize);  // 计算需要分割的小文件数量
  let chunkList = [];  // 分割后文件存储数组

  for (let i = 0; i < chunks; i++) {
    let start = i * chunkSize;
    let end = (i+1) * chunkSize;
    let blob = file.slice(start, end);  // 分割文件
    chunkList.push(blob);
  }
  return chunkList;
}

2.2 上传文件

使用XMLHttpRequest发送文件分割后的小文件，将每个小文件进行part标记。示例代码如下：

function uploadChunk(url, file, chunk, onProgress) {
  let xhr = new XMLHttpRequest();
  xhr.open('PUT', url, true);
  xhr.setRequestHeader('Content-Type', 'application/octet-stream');
  xhr.setRequestHeader('x-part-number', chunk.partIndex);
  xhr.onload = function () {
    if (xhr.status === 200) {
      onProgress(chunk, true);
    } else {
      onProgress(chunk, false);
    }
  };
  xhr.send(chunk.file);
}

2.3 断点续传

当上传失败时，记录下上传成功的分块，并在下次上传时跳过这些分块。示例代码如下：

function uploadFile(url, file, onProgress) {
  let chunkList = sliceFile(file);
  let successParts = [];  // 上传成功的分块
  let promises = [];

  for (let i = 0; i < chunkList.length; i++) {
    let chunk = chunkList[i];
    let partIndex = i + 1;
    let success = false;

    // 判断该分块是否上传成功
    for (let j = 0; j < successParts.length; j++) {
      if (successParts[j].partIndex == partIndex) {
        success = true;
        break;
      }
    }

    if (success) {
      onProgress(chunk, true);
      continue;  // 分块已上传成功，跳过本次循环
    }

    let p = new Promise(function (resolve, reject) {
      uploadChunk(url, file, {file: chunk, partIndex}, function (chunk, success) {
        if (success) {
          successParts.push(chunk);
          resolve(chunk);
        } else {
          reject(chunk);
        }
      });
    });

    promises.push(p);
  }

  Promise.all(promises).then(function () {
    console.log('上传成功');
  }).catch(function (chunk) {
    console.log(chunk.partIndex + '上传失败');
  });
}

3.示例说明

3.1 示例一

在一个上传服务端点上传一份大文件。根据以上实现思路，我们需要将文件分割为多块，设置上传进度条，实现断点续传。

1. 使用File.slice方法将大文件分为多个小文件。
2. 使用XMLHttpRequest发送文件分割后的小文件。
3. 记录下上传成功的分块，在下次上传时跳过这些分块。

3.2 示例二

在html5 mobile应用程序中，上传多个文件，文件的总大小可能会很大。根据以上实现思路，我们需要将每个文件分割为多个小文件，然后将小文件分别上传到指定的服务器。

1. 使用File.slice方法将每个文件分为多个小文件。
2. 分别发送文件分割后的小文件，设置上传进度条。
3. 记录下上传成功的分块，在下次上传时跳过这些分块。

以上就是关于“js自己实现一个大文件切片上传+断点续传的示例代码”的完整攻略，希望对你的学习有所帮助。