在客戶端Angularjs上將包含文件的文件夾解壓縮為內容

Question

我有一個大問題或者我找不到如何解決這個問題的方法。 我需要請求$ http.get，我得到一個zip文件，在這個zip文件中，我有需要在客戶端使用的圖像。 我嘗試使用不同的responseType =“ arraybuffer”，但沒有解決方案。 我的邏輯是：獲取zip文件，然后也許我將文件夾創建到客戶端，然后重復使用該zipFile中的這些圖像。 有人知道邏輯，以及如何實現解決方案？ 太感謝了。

Answer 1

我研究了使用JSZip（ API和升級指南的鏈接）下載zip並提取圖像文件，並提出了以下概念驗證代碼（在Angularjs之外）：

使用JSZIP的getZIP

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使用率，圖像文件大小，性能），並且瀏覽器緩存（沒有立即到期）可能是加快圖像訪問速度的另一種方法。