Javascript JSZip生成的Zip只包含一个图像文件

我正在尝试使用JSZip从图像生成zip。但每次我只得到一张zip图片，而不是100张。这是我的密码

   $("#download-images-small").on("click", function(){

        var zip = new JSZip();
        var count = 0;
        var zipFilename = "zipFilename.zip";
        var selections = $('.checkbox:checked')  //This returns an array of checkbox selected elements. 
        // Each checkbox contains URL in its data attribute ie. selections = ['url1', 'url2', 'url3'...]. See HTML Code.  

        for (var i = selections.length - 1; i >= 0; i--) {
            var filename = "filename"+ i +"."+ $(selections[i]).data("type");
            // loading a file and add it in a zip file
            console.log($(selections[i]).data("href"))
            JSZipUtils.getBinaryContent($(selections[i]).data("href"), function (err, data) {
               if(err) {
                  throw err; // or handle the error
               }
               zip.file(filename, data, {binary:true});
               count++;
               if (count == selections.length) {
                 zip.generateAsync({type:'blob'}).then(function(content) {
                      saveAs(content, zipFilename);
                   });
               }
            });
        }
    })

HTML代码：

<div class="fetched-images">
    <%= image_tag obj["url"], class: "img-fluid", title: obj["title"] , data:{ type: obj["ity"] }, crossOrigin: "Anonymous" %>
    <label class="checkbox-container">
        <input type="checkbox" data-type="<%= file_type %>" data-href="<%= file_url %>" checked="checked" class="this-image">
        <span class="checkmark"></span>
    </label>
</div>

这很简单

JSZipUtils.getBinaryContent

调用一个回调，在该回调中您将文件附加到

zip

。由于回调不在相同的上下文中运行，因此它无法访问更新的

filename

变量，并且总是获取最后分配的值（在您的情况下为filename0），并在每次迭代中使用该变量，因此会重写相同的文件，而不是添加新的文件。调用文件名回调中唯一的内容