前端 - 网页端下载时能不能同时下载多个资源,而且这些资源放置在同一个目录内?

Question

大概就是点击一个按钮,然后弹出一个目录选择器,但是该按钮可以触发多个资源的下载,这些资源都放置在同一个目录下。

Answer 1

这种需求一般都需要把所有资源打包成一个zip文件,就能实现再同一个目录下了,这个步骤一般是由服务端操作, 前端也行不过很少弄

npm install jszip
npm install file-saver


import axios from 'axios'
import JSZip from "jszip";
import FileSaver from "file-saver";



videoData:['/video/26519f026fc012521605563015227403.mp4','/video/f7b9cdae14ad51e491b62742f71c43e7.mp4','/video/1f82d79e0a9ef414419275a5f1d6bb94.mp4'],
 
 
 
download1(){
        var videoData = this.videoData;
        const zip = new JSZip();
        var promises = [];
        videoData.forEach(item => {
          const promise = this.getFile(item).then(data => {
            const arr_name = item.split("/");
            const file_name = arr_name[arr_name.length - 1]; // 获取文件名
            console.log(data)
            zip.file(file_name, data, { binary: true });
          });
          promises.push(promise);
        });
        Promise.all(promises).then(() => {
          console.log("全部下载完成");
          zip.generateAsync({ type: "blob" }).then(content => {
            // 生成二进制流
            console.log("生成压缩包");
            FileSaver.saveAs(content, "时间戳.zip");
          });
        });
      },
      getFile(url){
        return new Promise((resolve, reject) => {
          axios({
            method: "get",
            url:url,
            responseType: "blob"
          })
            .then(data => {
              resolve(data.data);
            })
            .catch(error => {
              reject(error.toString());
            });
        });
      },

Answer 2

最佳的方案是通过服务器先将这些文件打包成一个 .zip 文件，然后让浏览器只下载这一个文件。

Answer 3

File System Api 应该可以满足你的需求。

https://developer.mozilla.org/zh-CN/docs/Web/API/File_System_API

Answer 4

问题分析

1. 能不能同时下载多个资源

我们来思考一下 下载 的流程。
每次下载的时候，其实最终的行为都是 前端 向浏览器申请，然后 浏览器 对 用户 进行确认之后，才能开始下载。所以如果前端想要控制这个流程，感觉只有两个思路：

• 循环下载文件（这样可能会导致用户频繁点击确认，并不能让用户无感，否则可能会有安全问题）
• 打包下载文件（像钉钉邮箱一样，由后台进行打包）

2. 下载到同一个目录

同理，由于安全角度考虑，文件下载的位置完全由 浏览器 通过 用户设置 决定，所以客户端理论上都没有办法指定下载位置。

总结

所以由于浏览器安全策略限制，应该是没有办法实现题主的需求。可以通过 循环列表多次下载 或 打包后单次下载 两种变通方式实现，需要看业务方、产品能不能同意。