React：使用 JSZip 从项目目录中读取 Zip 文件答案

【问题标题】：React: Read Zip file using JSZip from the project directoryReact：使用 JSZip 从项目目录中读取 Zip 文件
【发布时间】：2020-06-28 16:16:11
【问题描述】：

我正在尝试从 React 的项目目录中读取包含图像的 zip 文件。

当我从 <input type="file" /> 打开 Zip 文件时，它通过使用 event.target.files[0] 来工作。但是，当我将同一个文件放入 react 项目中，然后尝试通过提供路径打开它时，它不起作用。

示例：“./test.zip”

我当前的代码：

let jsZip = new JSZip();
jsZip.loadAsync("./test.zip").then(function (zip) {
         let imagess = [];
         Object.keys(zip.files).forEach(function (filename) {
            zip.files[filename].async("base64").then(function (fileData) {
               const image = document.createElement("img");
               image.src = "data:image/*;base64," + fileData;
               document.querySelector(".unziped-container").appendChild(image);
            });
         });
      });

我已经坚持了几个小时，文档也没有帮助。任何帮助表示赞赏。

【问题讨论】：

标签： javascript reactjs jszip

【解决方案1】：

遇到这种情况的任何人都可以使用 JSZip-utils 并编写以下代码

JSZipUtils.getBinaryContent("../path/file.zip", function (err, data) {
         if (err) {
            throw err;
         }
         const jsZip = new JSZip();
         jsZip.loadAsync(data).then(function (zip) {
            Object.keys(zip.files).forEach(function (filename) {
               zip.files[filename].async("base64").then(function (fileData) {
                  const image = document.createElement("img");
                  image.src = "data:image/*;base64," + fileData;
                  const unziped = document.querySelector(".unziped-container");
                  unziped.appendChild(image);
               });
            });
         });
      });

【讨论】：

【解决方案2】：

the documentation 似乎很清楚：loadAsync 的第一个参数是 zip 文件数据，但您传递的是一个字符串。

（而且你想要做的事情无论如何都行不通。你的 React 代码在浏览器中运行，并且不知道文件系统路径或文件名。）

【讨论】：

它工作，我所要做的就是使用 Jszip utils ，而不是 JSZip 。谢谢你的回答