时间戳

首页 > 解决方案 > 将文件数组拆分为 N 个块

javascript - 将文件数组拆分为 N 个块

问题描述

我有一个文件数组，我必须根据文件大小将其拆分成块，这样：

最大大小为 20MB 的 [10MB 图像、5MB 图像、5MB 图像] 不需要拆分，但 [10MB、10MB、15MB] 将拆分为 [10MB、10MB] 和 [15MB]

然后我必须执行获取文件并将它们放入表单数据以将其发送到端点的功能。

我想要做的是返回一个FormData包含所需块的数组。

我怎样才能做到这一点？

这是当前功能：

const newImagesToEndpoint = (newFiles: NewImagesInterface[]) => {
    const newImages = new FormData();
    newFiles.forEach(img => {
      newImages.append('images[]', (img.file as unknown) as File);
    });
    return newImages;
  };

标签： javascriptarraysreactjstypescriptchunks

解决方案

这是我快速想出的算法。这是一个有点贪心的算法，按大小 DESC 排序，然后迭代排序后的数组并将文件“打包”到具有剩余可用性的数组中。它最终将中间结果映射到仅由块组成的数组。

注意：显然，您需要对此进行调整以实际使用您的文件数组并正确计算和比较文件大小。

const MAX_CHUNK_SIZE = 20;

const chunkFiles = (filesArray) =>
  filesArray
    .slice()
    .sort((a, b) => b.size - a.size)
    .reduce((chunks, file) => {
      const chunk = chunks.find((chunk) => chunk.available >= file.size);

      if (chunk) {
        chunk.array.push(file);
        chunk.available -= file.size;
      } else {
        chunks.push({
          array: [file],
          available: MAX_CHUNK_SIZE - file.size
        });
      }
      return chunks;
    }, [])
    .map(({ array }) => array);

const filesToProcess = [
  [{ size: 10 }, { size: 5 }, { size: 5 }],
  [{ size: 10 }, { size: 10 }, { size: 15 }],
  [{ size: 10 }, { size: 3 }, { size: 7 }, { size: 10 }, { size: 15 }]
];

filesToProcess.forEach((files, i) => {
  const chunks = chunkFiles(files);
  console.log(JSON.stringify(chunks));
});

这些文件块数组可以传递给您的newImagesToEndpoint实用程序。

推荐阅读