一文搞定：基于Promise和MD5实现大文件并行切片上传优化方案

前端

2023-12-10 08:32:51

前言

在大文件上传场景下，为了提高上传速度，可以采用切片上传的方式，将大文件切分成多个小文件，然后并行上传这些小文件。这样做可以充分利用网络带宽，提高上传效率。

但是，在实现大文件切片上传时，需要注意以下几个问题：

如何计算文件的MD5值？
如何控制并行上传的请求数？
如何避免浪费计算MD5值的时间？

本文将从基础实现开始，根据基础实现可以优化的地方逐步优化，最后实现一个通过Promise池控制上传并行请求数量，并且可以不浪费计算md5的时间的大文件切片上传方案。

基础实现

首先，我们来看一下基础实现。基础实现的思路很简单，就是将文件切分成多个小文件，然后并行上传这些小文件。

// 将文件切分成多个小文件
const file = new File([/* 文件内容 */], 'file.txt', {
  type: 'text/plain',
});
const chunkSize = 1024 * 1024; // 每个小文件的尺寸
const chunks = [];
for (let i = 0; i < file.size; i += chunkSize) {
  const start = i;
  const end = Math.min(i + chunkSize, file.size);
  const chunk = file.slice(start, end);
  chunks.push(chunk);
}

// 并行上传小文件
const promises = [];
for (const chunk of chunks) {
  const promise = uploadChunk(chunk);
  promises.push(promise);
}

Promise.all(promises).then(() => {
  console.log('文件上传完成');
});

这个实现虽然很简单，但是存在以下几个问题：

并没有计算文件的MD5值，这可能会导致文件上传失败。
没有控制并行上传的请求数，这可能会导致服务器端的负载过高。
在计算MD5值时，会浪费时间，因为计算MD5值是一个耗时的操作。

优化

针对上述问题，我们可以对基础实现进行优化。

计算文件的MD5值

为了计算文件的MD5值，我们可以使用FileReader对象。

const file = new File([/* 文件内容 */], 'file.txt', {
  type: 'text/plain',
});
const reader = new FileReader();
reader.onload = () => {
  const arrayBuffer = reader.result;
  const md5 = md5sum(arrayBuffer);
  console.log('文件的MD5值为：', md5);
};
reader.readAsArrayBuffer(file);

这样，就可以计算出文件的MD5值了。

控制并行上传的请求数

为了控制并行上传的请求数，我们可以使用Promise池。Promise池可以限制同时执行的Promise数量，从而控制并行上传的请求数。

// 创建Promise池
const pool = new PromisePool({
  concurrency: 5, // 并行上传的请求数
});

// 并行上传小文件
const promises = [];
for (const chunk of chunks) {
  const promise = pool.add(() => uploadChunk(chunk));
  promises.push(promise);
}

Promise.all(promises).then(() => {
  console.log('文件上传完成');
});

这样，就可以控制并行上传的请求数了。

避免浪费计算MD5值的时间

为了避免浪费计算MD5值的时间，我们可以使用并行计算MD5值。

// 并行计算MD5值
const promises = [];
for (const chunk of chunks) {
  const promise = calculateMD5(chunk);
  promises.push(promise);
}

Promise.all(promises).then((md5s) => {
  // 上传小文件
  const promises = [];
  for (const i in chunks) {
    const chunk = chunks[i];
    const md5 = md5s[i];
    const promise = uploadChunk(chunk, md5);
    promises.push(promise);
  }

  Promise.all(promises).then(() => {
    console.log('文件上传完成');
  });
});