根据URL批量下载文件并压缩成zip文件

根据url批量下载图片或者视频，只需要将图片的url和名称放到数组对象即可，例如：

let fileArr =[{fvUrl:'https://image.xuboren.com/image/2023/07/26/1410829074764cdbaa4314a084eb749e.jpg',fvName:'图片名称'},{fvUrl:'https://image.xuboren.com/image/2023/07/26/49536f24f07b4d0eb0e43171019c5f1f.jpg',fvName:'图片名称2'}]

将fileArr文件传入到下面的函数中

npm install jszip --save 

npm install file-saver --save

npm install axios

// loadZip.jsimport JSZip from'jszip'import FileSaver from'file-saver'import axios from'axios';// 批量打包下载// fileArr下载的list：例如：const loadZip =async(fileArr, zipName ='下载文件')=>{
  fileArr.forEach(el=>{
    el.fvName =`${el.fvName}.${el.fvUrl.split('.').at(-1)}`// 截取url的后缀名添加到文件名： fvname.jpg})const zip =newJSZip()// 创建实例对象const promises =[]// 遍历生成下载文件
  fileArr.forEach((item)=>{const promise =getFile(item.fvUrl).then((res)=>{const fvName = item.fvName +''// 创建文件用file()，创建文件夹用 floder()
      zip.file(fvName, res.data,{binary:true})})
    promises.push(promise)})/** 
Promise.all() 静态方法接受一个 Promise 可迭代对象作为输入，并返回一个 Promise。当所有输入的 Promise 都被兑现时，返回的 Promise 也将被兑现（即使传入的是一个空的可迭代对象），并返回一个包含所有兑现值的数组。如果输入的任何 Promise 被拒绝，则返回的 Promise 将被拒绝，并带有第一个被拒绝的原因。

只有当all([p1, p2, p3]) 中的每一个 Promise 实例的状态都变成 fulfilled, Promise.all()的状态才会变成 fulfilled，此时  p1, p2, p3 的返回值组成一个数据，传给 Promise.all()的回调函数

只要 p1, p2, p3 中任何一个被 rejected,  Promise.all() 的状态就会变成 rejected，此时第一个被 rejected 的实例的返回值，会传给 Promise.all()的回调函数。
      
在上面的代码中，promises 数组中的每一个元素，都是 Promise 实例，所以需要用到 Promise.all()
 */// 生成 zip 文件
  Promise.all(promiseAll).then(()=>{// 生成zip 文件
    zip.generateAsync({type:'blob',// 文件格式compression:'DEFLATE',// STORE: 默认不压缩， DEFLATE：需要压缩compressionOptions:{level:9// 压缩等级 1~9   1 压缩速度最快， 9 最优压缩方式}}).then((res)=>{
      FileSaver.saveAs(res,`${zipName}.zip`)// 使用FileSaver.saveAs保存文件，文件名可自定义})})}// 这一步为下载文件步骤，通过传入的url下载文件// 将文件 url 格式转换为 Bolb 类型格式 或者 arraybuffer 格式constgetFile=(fvUrl)=>{returnnewPromise((resolve, reject)=>{axios(fvUrl,{method:'get',// get请求responseType:'blob'// 返回的数据会被强制转为blob类型 ，转换成arraybuffer 也行}).then((res)=>{resolve(res)// 将下载的文件返回}).catch(err=>{reject(err)})})}exportdefault loadZip;

函数封装好后，在对应的页面引入该函数，然后将fileArr, zipName传入即可，例如：

// 需要使用的页面// ...其他逻辑loadZip(fileArr, zipName);

需要注意的是，图片视频下载可能会跨域，这个需要后端配合解决，也有可能是oss配置的问题。

参考文章：https://blog.csdn.net/qq_41131745/article/details/128874556