如何使用 jszip 从客户端的 ZIP 文件中选择文件答案

【问题标题】：How to select files from a ZIP file on client-side with jszip如何使用 jszip 从客户端的 ZIP 文件中选择文件
【发布时间】：2020-01-04 07:54:09
【问题描述】：

我想处理一个非常大的 ZIP 文件，我只想在其中提取一些 PDF 文件，然后将它们上传到服务器。我的应用程序中已经有一个函数，它接受一个文件数组，发送它们并从服务器获取处理结果。

我关心的是如何从 ZIP 中设置一个等效的文件数组。

我已经测试了 zip.js 和 jszip.js，但是我得到了一些奇怪的结果。这是我的 jszip 代码

async function unzipAndSelect( zipFile ) {
   var flist = [];
   var zip = await JSZip.loadAsync(zipFile);
   await zip.forEach( async function (relativePath, zipEntry) {

      var match = zipEntry.name.match( /REGEX.pdf$/ );
      if(match) {
         var blob = await zip.file( zipEntry.name ).async("blob");
         var file = new File( [blob], zipEntry.name, {type : 'application/pdf'} );
         flist.push( file );
      }
   });
   console.log( fileList );
   return flist;
}

uploadPDFs( fileList ) {
   if(fileList.length) {
      fileList.forEach( function(f) {
         // upload stuff ...
      }
   }
}

var fileList = unzipAndSelect( "myfile.zip" );
uploadPDFs( fileList );

fileList 似乎已填充，但其长度仍为零。当我删除长度测试时，没有任何反应。我的方法正确吗？有什么帮助吗？

【问题讨论】：

注意forEach() 方法不太可能感知 Promise，这意味着它不会使用异步回调生成的 Promise 来等待下一次迭代

标签： javascript jszip

【解决方案1】：

我查看了 JSZip 内部结构，并按照 @patrick-evans 的建议确认 forEach() 方法不支持 Promise。

这是我的解决方案：

async function unzipAndSelect( zipFile ) {
   var flist = [];
   var zip = await JSZip.loadAsync(zipFile);
   // async-forEach loop inspired from jszip source
   for(filename in zip.files) {
      if (!zip.files.hasOwnProperty(filename)) {
         continue;
      }
      // Object key is the filename
      var match = filename.match( /REGEX.pdf$/ );
      if(match) {
         var blob = await zip.file( filename ).async("blob");
         var file = new File( [blob], filename, {type : 'application/pdf'} );
         flist.push(file);
      }
   }
   return flist;
}

【讨论】：