使用window.showSaveFilePicker实现保存多个文件到同一目录下-CSDN博客

本文链接：https://blog.csdn.net/a261442315/article/details/139823762

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

要求只选择一次地址后将多个文件、图片或视频存放在选择路径中，目前还没有完美解决这个问题，只是利用打包将所有文件压缩为一个文件

首先使用npm下载第三方库JSZip，并使用import引入

注：由于需要读取本地文件夹，所以只能在本地或https环境才能运行

 // 创建一个新的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绑定到回调函数中