我正在下载多个图像作为javascript中的zip文件

当我点击下载按钮时，我试图下载多个图像，但不幸的是，我在zip文件中得到了空文件夹，图像或文件没有在zip文件中下载。请帮助我如何解决这个问题？谢谢

HTML视图

@if($digitizingInbox->file )
  <button class="download btn btn-warning">Download</button>
@endif

@if（$digitizingbox->file）
下载
@恩迪夫

脚本

<script src="{{ url('') }}/js/jszip.min.js"></script>
<script src="{{ url('') }}/js/saveas.js"></script>

<script>
  window.onload = function(event) {

    let val = document.querySelector('.download')

    let url = "{{config('yourstitchart.file_url')}}"
    // let url http://localhost/yourstitchart.com/web/public/uploads/images/
    alert(url);

    let files = {!!$digitizingInbox->file!!}
    // let files = favicon-new.png,phpG70dmT.png
    alert(files);

    var zip = new JSZip();
    //skip this step if you don't want your files in a folder.

    var folder = zip.folder("files");

    files.map(async item => folder.file(url + item))

    //...so on until you have completed adding files

    val.addEventListener("click", (e) => {

      zip.generateAsync({
          type: "blob"
        })

        .then(function(content) {

          //see FileSaver.js
          saveAs(content, "example.zip");
        });
    });
  }
</script>

window.onload=函数（事件）{
让val=document.querySelector（“.download”）
让url=“{config（'yourstitchart.file_url'）}”
//让urlhttp://localhost/yourstitchart.com/web/public/uploads/images/
警报（url）；
让文件={！！$DigitizingBox->file！！}
//让files=favicon new.png，phpG70dmT.png
警报（文件）；
var zip=newjszip（）；
//如果不想将文件放在文件夹中，请跳过此步骤。
var folder=zip.folder（“文件”）；
files.map（异步项=>folder.file（url+项））
//…依此类推，直到完成添加文件
val.addEventListener（“单击”，（e）=>{
zip.generateAsync({
类型：“blob”
})
.然后（功能（内容）{
//请参阅FileSaver.js
saveAs（内容，“example.zip”）；
});
});
}

我没有你的整个项目，所以我不确定这里到底发生了什么。。但我觉得这很有趣，我发现了一个js小提琴，它非常接近你在这里所做的，并对它进行了一些修改。除非这是一项需要非常具体的方法的任务，否则我认为这将对您有效：

依赖项如下所示：

let links=[]；
$（'.gallery'）。在（'click'，'.thumb'，函数（）{
$（this.removeClass（）.addClass（'thumbChecked'）；
$（this.css（“边框”，“2px实体”#c32032”）；
links.push（$（this.attr（'src'））；
控制台日志（链接）；
如果（links.length！=0）{
$（'.download'）.css（“显示”、“块”）；
}
});
$（'.gallery'）。在（'单击'，'.thumbChecked'，函数（）{
$（this.removeClass（）.addClass（'thumb'）；
$（this.css（“边框”，“2倍纯白”）；
让itemtoRemove=$（this.attr（'src'）；
链接.拼接（$.inArray（itemtoRemove，链接），1）；
控制台日志（链接）；
如果（links.length==0）{
$（'.download'）.css（“显示”、“无”）；
}
});
函数generateZIP（）{
console.log（'TEST'）；
让zip=newjszip（）；
让计数=0；
让zipFilename=“Pictures.zip”；
links.forEach（函数（url，i）{
让filename=links[i]；
filename=filename.replace（/[\/\*\\\\\\\\ \：\\？\“\\]/gi”“）.replace（“httpsi.imgur.com”“）；
//加载文件并将其添加到zip文件中
getBinaryContent（url、函数（err、数据）{
如果（错误）{
抛出err；//或处理错误
}
文件（文件名，数据，{binary:true}）；
计数++；
if（count==links.length）{
generateAsync（{type:'blob'}）。然后（函数（内容）{
saveAs（content，zipFilename）；
});
}
});
});
}

文件
.画廊{
文本对齐：居中；
}
.gallery>img{
宽度：100px；
不透明度：.8；
}
.gallery>img:悬停{
光标：指针；
不透明度：1；
}
.imgContainer{
填充顶部：10px；
}
.拇指{
高度：110px；
宽度：160px；
利润率：10px；
填充：2px；
盒影：2×2×4×rgba（70,70,70,0.6）；
边框：2倍纯白；
}
.拇指：悬停{
盒影：3px 3px 6px rgba（70,70,70,0.8）；
光标：指针；
}
.拇指检查{
不透明度：.8；
高度：110px；
宽度：160px；
利润率：10px；
填充：2px；
盒影：2×2×4×rgba（70,70,70,0.6）；
}
.下载{
边缘顶部：20px；
显示：无；
保证金：0自动；
}