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

Question

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

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

示例：“./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);
            });
         });
      });

我已经坚持了几个小时，文档也没有帮助。感谢任何帮助。

Answer 1

the documentation 看起来很清楚：loadAsync 的第一个参数是 zip 文件数据，但你传递给它的是一个字符串。

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

Answer 2

遇到此问题的任何人都可以使用 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);
               });
            });
         });
      });

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

React: Read Zip file using JSZip from the project directory

javascript

jszip

reactjs