如何解压缩包含多个文件的zip文件并将这些文件推送到我的dropzone上传器

Question

我正在尝试解压缩文件，然后将内部未压缩的文件发送回dropzone上传器中

我有一个使用Dropzone.js的多文件上传器。这对于多个文件来说效果非常好，但是我试图让它提取（解压缩）一个zip文件，然后获取该zip文件的内容，然后将它们重新推回到Dropzone.js上传器中。

我已经尝试使用zip.js和JSZip，但我到达了要获取blob对象或（工人）的地步，但后来我不知道如何使它们回到上传器中，就像我选择了“上传”并抓取文件并将其放入。

Dropzone上传器在选择drop /文件时提交。也许我只是不热衷于浏览器中的解压缩过程是如何工作的，或者我想做的事情根本可以完成吗？

我希望在浏览器端执行此操作，以使用我已经使用的一些逻辑来上载时间以及文件命中服务器时的处理时间。

让我知道是否需要添加其他内容，基本上只将dropzone.js代码与zip.js代码混合即可完成我正在寻找的内容。预先感谢！

示例：

var mediaDropzone = new Dropzone("#media-dropzone", {
   dictDefaultMessage: "Click or Drop files here to upload",
   dictInvalidFileType: "You can't upload files of this type.",
  });
  Dropzone.options.mediaDropzone = false;
  mediaDropzone.options.acceptedFiles = ".csv,.xls,.xlsx,.txt,.zip";
  mediaDropzone.on("sending", function(files, xhr, formData){
    if (files.type === "application/zip"){
        console.log(jQuery.type(files));
        unzipBlob(files, function(unzippedBlob) {
          // logs the uncompressed Blob
          console.log(unzippedBlob);
          });
        this.removeFile(files)
    }
      formData.append("fileuuid", files.upload.uuid);
  });
  mediaDropzone.on("complete", function(files) {
    var _this = this;
      setTimeout(function(){
        var acceptedFiles = _this.getAcceptedFiles();
        var rejectedFiles = _this.getRejectedFiles();

        for(var index = 0; index < acceptedFiles.length; index++) {
          var file = acceptedFiles[index];
          console.log(jQuery.type(file));
          if (file.status == "success") {
            appendContent(file.status, file.name, file.upload.uuid);
            _this.removeFile(file)
          }
        }

        if(acceptedFiles.length != 0) {
          alertify.success('Uploaded ' + acceptedFiles.length + ' files successfully.');
        }
        if(rejectedFiles.length != 0) {
          alertify.error('Error uploading ' + rejectedFiles.length + ' files.');
        }
      }, 2000);
  });
});

function unzipBlob(blob, callback) {
  // use a zip.BlobReader object to read zipped data stored into blob variable
  zip.createReader(new zip.BlobReader(blob), function(zipReader) {
    // get entries from the zip file
    zipReader.getEntries(function(entries) {
      // get data from the first file
      console.log(entries.length);
      for(var index = 0; index < entries.length; index++) {
        var file = entries[index];
          file.getData(new zip.BlobWriter("text/plain"), function(data) {
  // close the reader and calls callback function with uncompressed data as parameter
          console.log("DATA::: " + data.data());
          zipReader.close();
          callback(data);
         });
      };
    });
  }, onerror);
}

万一其他人遇到同样的问题，经过一些研究，我想出了一个解决方案。希望这对其他人有帮助！

if (files.type === "application/zip"){
  var zip = new JSZip();
  zip.loadAsync( files /* = file blob */)
     .then(function(zip) {
       return jQuery.map(Object.keys(zip.files), function(filename) {
         return zip.files[filename].async('blob').then(function (fileData) {
           if (filename.includes("_MAC")){
            void(0)
          } else {
              var bloblextracted = new File([fileData], filename);
              mediaDropzone.addFile(bloblextracted);
          }
        })
       })
     }, function() {alert("Not a valid zip file")});
this.removeFile(files)
void(0)}