Question

当我向服务器发出请求时，它会返回一个流zip

const response = await axios.get('http://192.168.1.100:3030', {
    params: this.getParams(),
    responseType: 'blob' 
});

console.log(response.data);

我想获取此zip的内容而不保存文件。但是，如果我尝试使用“新Blob”捕获内容，则会出现以下情况：

PK ¥ZksÛÆ=³þ~ç§N;1  d2Ã,S!EÔ_2¦ÎÈ+Ûéã×ö§ôîÙ%........

但是，期望值是

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

我发现这个例子很相似。但是，它对我不起作用：Decompress gzip and zlib string in javascript

是否有可能无需保存就可以获取内存中该zip的内容？

Answer 1

就像其他人提到的那样，您需要在客户端解压缩该zip才能实际看到该zip的内容。对于浏览器，blob只是一堆二进制数据，没有任何意义。如果您仔细查看输出，您将得到：

PK¥ZksÛÆ=³þ〜ç§N; 1

由于最初的 PK ，您至少可以看到它是一个zip文件。它是zip文件标题的一部分。

JSZip是一个非常流行的用于zip操作的Javascript库。

这里是一个示例，该示例加载包含JqueryUI的zip文件（由于CORS的限制，我们必须通过代理yacdn.org来获取它）。成功加载后，JSZip用于获取zip归档文件中的文件列表。这是通过JSZip的loadAsync方法并将blob作为参数传递来完成的。

 zip.loadAsync(response.data).then(function(contents) {
   console.log(Object.keys(contents.files));
 });

返回的文件数组包含文本文件 jquery-ui-1.12.1 / AUTHORS.txt 如果我们想查看实际文件-并且您也尝试查看文本文件-我们需要更多代码。

contents.files["jquery-ui-1.12.1/AUTHORS.txt"].async("string").then(function(data) {
      console.log(data);
    });

完整代码：

async function loadZip() {
  const response = await axios.get('https://yacdn.org/serve/https://jqueryui.com/resources/download/jquery-ui-1.12.1.zip', {
    responseType: 'blob'
  });

  var zip = new JSZip();
  zip.loadAsync(response.data).then(function(contents) {
    console.log(Object.keys(contents.files));
    contents.files["jquery-ui-1.12.1/AUTHORS.txt"].async("string").then(function(data) {
      console.log(data);
    });
  });
}
loadZip();

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.0/jszip.min.js"></script>

阅读请求内容

1 个答案: