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

Question

I am trying to read a zip file which has images from the project directory in React.

When I open the Zip file from <input type="file" /> , it works by taking the event.target.files[0] . But when I put that same file in react project and then try to open it by giving a path, it doesnt work.

Example: "./test.zip"

My current code:

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);
            });
         });
      }); 

I have been stuck on this for hours and the documentation is not helping either. Any help is appreciated.

Answer 1

the documentation seems pretty clear: the first argument to loadAsync is the zip file data, but you're passing it a string.

(and what you're tring to do won't work anyway. your React code is running in the browser and has no knowledge of filesystem paths or filenames.)

Answer 2

Anyone coming across this can use JSZip-utils and write the following code

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);
               });
            });
         });
      });