4

我正在尝试使用 JavaScript 在浏览器中重建解压缩的 zip 文件的文件/文件夹结构。理想情况下，我希望将所有文件都放在FileList中 （就好像它们刚刚通过网页上传一样）或其他可迭代对象。例如，一个压缩文件夹包含

folder/file1
folder/file2
someotherfile

应该重构为一个 FileList/iterable 对象，其中每个项目对应于包中的一个文件（据我所知，没有办法在 JS 中保留文件夹结构）。

我在阅读 tar.gz 文件并使用pako和此问题底部的代码解压缩它方面非常成功。但是，pako 的结果是一个大的 ArrayBuffer（inflator.result在下面的代码中），在尝试重建原始文件和文件夹时，我无法从中得出正面或反面。我遇到了以下问题：

  1. 我如何知道 ArrayBuffer 中一个文件的结束位置和另一个文件的开始位置？
  2. 如何确定当前文件的原始文件类型？

一旦我知道了这一点，我应该能够将 ArrayBuffer 数据转换为一个文件

File(segment, {type: filetype})

搜索网络也没有提供任何有用的信息。有没有人知道如何解决这个问题？

这是我用来解压缩 zipfile 的代码。

import pako from 'pako';
import isFunction from 'lodash/isFunction'

class FileStreamer {
  constructor(file, chunkSize = 64 * 1024) {
    this.file = file;
    this.offset = 0;
    this.chunkSize = chunkSize; // bytes
    this.rewind();
  }
  rewind() {
    this.offset = 0;
  }
  isEndOfFile() {
    return this.offset >= this.getFileSize();
  }
  readBlock() {
    const fileReader = new FileReader();
    const blob = this.file.slice(this.offset, this.offset + this.chunkSize);

    return new Promise((resolve, reject) => {
      fileReader.onloadend = (event) => {
        const target = (event.target);
        if (target.error) {
          return reject(target.error);
        }

        this.offset += target.result.byteLength;

        resolve({
          data: target.result,
          progress: Math.min(this.offset / this.file.size, 1)
        });
      };

      fileReader.readAsArrayBuffer(blob);
    });
  }
  getFileSize() {
    return this.file.size;
  }
}

export async function decompress(zipfile, onProgress) {
  const fs = new FileStreamer(zipfile);
  const inflator = new pako.Inflate();
  let block;

  while (!fs.isEndOfFile()) {
    block = await fs.readBlock();
    inflator.push(block.data, fs.isEndOfFile());
    if (inflator.err) {
      throw inflator.err
    }
    if (isFunction(onProgress)) onProgress(block.progress)
  }

  return inflator.result;
}
4

2 回答 2

3

.tar.gz 文件是一个 tar 文件（'Tape ARchive' - 因为最初捆绑文件以存储在磁带上是它的主要目的），然后随后被压缩。您可以获得诸如 tar.bz 之类的变体，用于基于 bzip 的压缩。

请注意，这与 PKZIP 最初创建的 .zip 文件格式不同，后者在单个步骤/规范中处理捆绑 (tar) 和压缩 (gz)。

无论如何，鉴于此，您将需要另一种工具来解释 tar 数据并将其转化为对您的目的有用的东西。我搜索了“tar 文件阅读器 js”，找到了 js-untar：https ://github.com/InvokIT/js-untar

这似乎需要一个 ArrayBuffer 并将其转换为一系列 File 对象。项目页面中的示例代码：

import untar from "js-untar";

// Load the source ArrayBuffer from a XMLHttpRequest (or any other way you may need).
var sourceBuffer = [...];

untar(sourceBuffer)
.progress(function(extractedFile) {
    ... // Do something with a single extracted file.
})
.then(function(extractedFiles) {
    ... // Do something with all extracted files.
});

// or

untar(sourceBuffer).then(
    function(extractedFiles) { // onSuccess
        ... // Do something with all extracted files.
    },
    function(err) { // onError
        ... // Handle the error.
    },
    function(extractedFile) { // onProgress
        ... // Do something with a single extracted file.
    }
);

这似乎是你需要的。

（请注意，我不能保证这个模块的适用性或可靠性，因为我从未使用过它，但这应该给你一个起点和背景来继续）。

于 2018-05-30T09:29:53.163 回答
1

在 ChrisM 的回答和他对 js-untar 的参考的帮助下，我设法编写了以下内容，它可以很好地完成工作：

import pako from 'pako';
import isFunction from 'lodash/isFunction';
import untar from 'js-untar';

class FileStreamer {
  ...
}

export async function decompress(zipfile, onProgress) {
  const fs = new FileStreamer(zipfile);
  const inflator = new pako.Inflate();
  let block;

  while (!fs.isEndOfFile()) {
    block = await fs.readBlock();
    inflator.push(block.data, fs.isEndOfFile());
    if (inflator.err) {
      throw inflator.err
    }
    if (isFunction(onProgress)) onProgress(block.progress)
  }
  return await untar(inflator.result.buffer);
}

解压缩函数的结果现在是一个包含 File 对象的数组。甚至可以检索存档文件中有关原始路径的信息。

于 2018-05-30T10:15:37.407 回答