window.showSaveFilePicker保存多个文件到同一路径

Question

使用window.showSaveFilePicker来实现保存多个文件到同一目录下，但是最终实现的只有保存最后一个文件，并且文件名的保存也不对

async checkDownload() {
      try {
        const opts = {
          types: [
            {
              description: "图片文件",
              accept: {
                "image/png": [".png"],
                "image/jpeg": [".jpg", ".jpeg"],
              },
            },
          ],
          excludeAcceptAllOption: true,
          suggestedName: this.allcheckedList[0].PicName,
        };

        const selectedHandle = await window.showSaveFilePicker(opts); // 在循环外部调用一次

        for (let imageUrl of this.allcheckedList) {
          await this.saveImage(selectedHandle, imageUrl); // 在循环内部调用保存函数，传递句柄和图片URL
        }

        console.log("所有文件保存成功");
      } catch (error) {
        console.error("文件保存失败:", error);
      }
    },
    async saveImage(selectedHandle, imageUrl) {
      // 获取图片数据
      const response = await fetch(imageUrl.PicWebPath.replace("http", "https"));
      const imgData = await response.blob();

      // 生成唯一的文件名
      const extension = imageUrl.PicWebPath.substring(imageUrl.PicWebPath.lastIndexOf('.'));
      const fileName = imageUrl.PicName;

      // 使用句柄保存文件
      const writable = await selectedHandle.createWritable();
      await writable.write(imgData,{fileName});
      await writable.close();
    },

Answer 1

使用window.showSaveFilePicker来实现保存多个文件到同一目录下，但是最终实现的只有保存最后一个文件，并且文件名的保存也不对

项目要求为只选择一次地址后将多个文件、图片或视频存放在选择路径中，目前还没有完美解决这个问题，但想到了另一个方法

 // 创建一个新的ZIP实例
        var zip = new JSZip();

        // 将所有文件添加到ZIP中
        for (let imageUrl of this.allcheckedList) {
          const response = await fetch(imageUrl.PicWebPath.replace("http", "https"));
          const imgData = await response.blob();
          const fileName = imageUrl.PicName;

          // 将文件添加到ZIP中
          zip.file(fileName, imgData);
        }

        // 生成ZIP文件
        zip.generateAsync({ type: "blob" })
          .then(async function (content) {
            // 获取要保存的文件名
            const fileName = this.info.Name + '.zip';

            // 使用window.showSaveFilePicker()保存ZIP文件
            const handle = await window.showSaveFilePicker({
              types: [{ description: 'ZIP 文件', accept: { 'application/zip': ['.zip'] } }],
              suggestedName: fileName
            });
            const writable = await handle.createWritable();
            await writable.write(content);
            await writable.close();
          }.bind(this)); // 将this绑定到回调函数中

将多个文件放入一个zip中，并直接将zip文件下载到指定路劲，JSZip为第三方库，使用前需要提前下载并引入