等待所有文件更新，然后下载

问题描述

我正在使用JSZip库创建.png文件并将其添加到要下载的zip存档中.当我添加太多大文件时，问题就来了.

I'm using the library JSZip to create .png files and add them to a zip archive to be downloaded. The problem comes when I add too many large files.

我使用一组for循环将文件添加到zip，然后激活自动下载.问题似乎是下载开始于文件更新之前，因此它们最终没有数据.

I use a set of for loops to add the files to the zip then activate an automatic download. The issue seems to be that the download starts before the files have been updated so they end up with no data.

for (var row = 0; row < 3; row++) { // Loop for rows
  for (var col = 0; col < 3; col++) { // Loop for cols
    if (cropSrc[row][col]) { // If data for cropped img exists
      var fileName = row + "" + col + ".png";
      zip.file(fileName, cropSrc[row][col].src, {
        base64: true
      }); // Add file to zip

      zip.file(fileName).async("uint8array").then(function(u8) { // Once file is complete... I think
        console.log("done");
      });

    }
  }
}

// Download zip file
zip.generateAsync({
  type: "base64"
}).then(function(base64) {
  window.location = "data:application/zip;base64," + base64;
});

我必须确保等到所有文件都更新后才能下载，我该如何使用异步功能执行此操作?

I have to make sure I wait till all files have been updated before downloading, how would I do this using async functions?

这里是 JSZip异步文档

不确定这是否有帮助，但是这里是完整代码的更完整介绍，我正在使用SAPUI5并在SAP Web IDE中进行开发:

Not sure if this will help but here is a more complete look at the full code, I'm using SAPUI5 and developing in SAP Web IDE:

var cropSrc = {
    0: {
        0:{src:"base64 data placeholder"},
        1:{src:"base64 data placeholder"},
        2:{src:"base64 data placeholder"}
    },
    1: {
        0:{src:"base64 data placeholder"},
        1:{src:"base64 data placeholder"},
        2:{src:"base64 data placeholder"}
    },
    2: {
        0:{src:"base64 data placeholder"},
        1:{src:"base64 data placeholder"},
        2:{src:"base64 data placeholder"}
    }
};

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "SAP_SARAH_ML_Project/libs/jszip", // Enables the jszip library (imports)
], function(Controller, jszipjs) { // Second part of importing
    "use strict";
    return Controller.extend("SAP_SARAH_ML_Project.controller.View1", {

        zipImg: function() {
            for (var row = 0; row < 3; row++) { // Loop for rows
                for (var col = 0; col < 3; col++) { // Loop for cols
                    if (cropSrc[row][col]) { // If data for cropped img exists
                        var fileName = row + "" + col + ".png";
                        zip.file(fileName, cropSrc[row][col].src, {
                            base64: true
                        }); // Add file to zip

                        zip.file(fileName).async("uint8array").then(function(u8) { // Once file is complete... I think
                            console.log("done");
                        });

                    }
                }
            }

            // Download zip file
            zip.generateAsync({
                type: "base64"
            }).then(function(base64) {
                window.location = "data:application/zip;base64," + base64;
            });
        }
    });
});

推荐答案

您可以为此使用Promise.all:

You can use Promise.all for this:

let arr = [addFilePromise('file1'),addFilePromise('file2'),addFilePromise('file3')]
Promise.all(arr).then(zip.generateAsync({type:"base64"}))

let fileAddActions = [];

let addFilePromise = function(filename){
    zip.file(fileName, cropSrc[row][col].src, {
        base64: true
    });

    return zip.file(fileName).async("uint8array")
}


for (var row = 0; row < 3; row++) { // Loop for rows
    for (var col = 0; col < 3; col++) { // Loop for cols
        if (cropSrc[row][col]) { // If data for cropped img exists
        var fileName = row + "" + col + ".png";
        fileAddActions.push(addFilePromise(fileName))

        }
    }
}


Promise.all(fileAddActions).then(zip.generateAsync({type:"base64"})).then(base64 => {
    indow.location = "data:application/zip;base64," + base64;
})

类似这样的东西应该起作用，我也推荐这篇文章: https://developer.mozilla.org/de/docs/Web/JavaScript/参考/Global_Objects/Promise

something like this should work, also i recommend this article:https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Promise

这篇关于等待所有文件更新，然后下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！