javascript - 在客户端 Angularjs 上解压包含文件的文件夹作为内容

Question

我遇到了一个大问题，或者我不知道如何解决这个问题。我需要请求 $http.get 并获得一个 zip 文件，在这个 zip 文件中我有需要在客户端使用的图像。我尝试使用不同的 responseType="arraybuffer"进行操作，但没有解决方案。我的逻辑是:获取 zip 文件，然后也许我会在客户端创建文件夹并重用该 zip 文件中的这些图像。有人知道逻辑以及如何实现该解决方案吗？谢谢一百万。

Answer 1

我研究了使用 JSZip(API 和 upgrade guide 的链接)来下载 zip 并提取图像文件，并提出了以下概念验证代码(在 Angularjs 之外):

使用 JSZIP 获取 ZIP

function getZip( url){  // returns a Promise for the zip
    var resolve, reject, req;

    var req = new XMLHttpRequest();
    req.open('GET', url, true);
    req.responseType = "arraybuffer";
    req.onload = function() {
        var zip = new JSZip();  // ************
        resolve( zip.loadAsync(req.response));
    };
    req.onError = req.onAbort = function(){
        reject( new Error("GET from " + url + " failed"));
    }
    req.send();
    return new Promise( function(r,j) {resolve=r; reject=j;});
}

如果成功，它会返回一个用 zip 对象实现的 promise ，并且

下载 zip、提取并显示图像的测试

window.onload=function(){
    getZip("./test.zip")
    .then( processZip)
    .catch( function( err){
        console.log("something went wrong: " + err);
    });
}
function processZip( zip){
    zip.file("test.png")
    .async("base64")
    .then( function( data){
        var img = new Image();
        img.src = "data:image/png;base64," + data;
        document.body.appendChild(img);
        })
    .catch( function(err){ throw err;});
}

这需要一个包含 test.png 的 test.zip 文件，位于与测试页面相同的文件夹中。

<小时/>尽管这个概念似乎有效，但可能存在限制(RAM 使用、图像文件大小、性能)，并且浏览器缓存(不会立即过期)可能是加速图像访问的另一种方法。