多文件下载含进度条可视频可图片

html篇

<el-dialog title="下载进度" :visible.sync="dialogVisible">

<el-progress

v-for="(file, index) in downloadArr"

:key="index"

:percentage="file.percentage"

/>

</el-dialog>

data数据篇

 data() {
    return {
      contextMenuData: {
        axis: {
          x: null,
          y: null
        }
      },
      fill_img,
      video_img,
      directoryArr: {}, // 未分类的文件夹
      directoryTotal: "", // 文件夹的数量
      fileArr: {}, // 未分类下的文件
      fileTotal: "", // 文件下的数量
      contextMenuTarget: this.$refs.detailimg, // 可右键区域，这里也可以绑定$refs
      contextMenuVisible: false, // 右击显示出来的弹框
      visible: false, // 移动文件夹的弹弹框
      tree: false, // 文件渲染tree组件的创建与销毁
      delVisible: false, // 删除文件提示框
      delPVisibale: false,
      isshift: false, // 快捷键 shift 是否被按下
      isctrl: false, // 快捷键 ctrl 是否被按下
      currentIndex: "", // 现在选中的图片或视频
      currentArr: [], // 上方div图切是否被多选中，如果多选了就把他的id（委唯一标识，现在是index）放到这个列表里面
      fileCurrentIndex: "", // 现在选中的图片或视频
      fileCcurrentArr: [], // 上方div图切是否被多选中，如果多选了就把他的id（委唯一标识，现在是index）放到这个列表里面
      arr: [], // 多选下的资源信息(数组对象形式)
      searchInput: "", // 搜索关键词
      treeData: [], // 所有节点信息
      currenFiles: false, // 当前是否有文件夹选中
      unassortedRecord: [], // 未分类路径
      movedisabled: null, // 是否是移动文件夹
      percentage: 0, // 下载进度
      dialogVisible: false, /// 进度条显示
      downloadArr: [] // 多个下载进度(多选的时候往里push)
    };
  },

percentage: 0, // 下载进度

dialogVisible: false, /// 进度条显示

downloadArr: [] // 多个下载进度(多选的时候往里push)

选中文件夹

 // 单个选中的文件
    changeIndex(item, index) {
      try {
        this.currentIndex = index; // 新家的
        this.currenFiles = false;
        this.fileCurrentIndex = "";
        this.movedisabled = true;
        this.contextMenuVisible = false;
        this.downloadArr = [];
        this.setIsFile(false);
        if (this.isctrl || this.isshift) {
          if (this.currentArr.includes(index)) {
            this.currentArr = this.currentArr.filter(cr => cr !== index);
          } else {
            this.currentArr.push(index);
          }
          // 先查传进来的数据多选下的数组里有没有coskey(未分类情况)
          if (this.$route.path === "/unassorted") {
            const unassortedExist = this.arr.find(i => i.cosKey == item.cosKey);
            // console.log(unassortedExist, "有吗");
            if (unassortedExist) {
              this.arr = this.arr.filter(
                ex => ex.cosKey !== unassortedExist.cosKey
              );
            } else {
              this.arr.push(item);
            }
          }
          console.log(this.$route.path, "path");
          // 先查传进来的数据多选下的数组里有没有相同的id(文件情况)
          if (this.$route.path === "/home" || this.$route.path === "/notag") {
            console.log(this.arr, "错误的文件夹");
            const fileExist = this.arr.find(i => i.id === item.id);
            console.log(fileExist, "fileExist");
            if (fileExist) {
              this.arr = this.arr.filter(ex => ex.id !== fileExist.id);
            } else {
              this.arr.push(item);
              console.log(this.arr, "新数组");
            }
          }
        } else {
          this.currentArr = [];
          this.currentArr.push(index);
          this.arr = [];
          this.arr.push(item);
        }

        if (
          this.$route.path === "/home" ||
          this.$route.path === "/search" ||
          this.$route.path === "/notag"
        ) {
          const id = (this.arr || []).map(item => item.id);
          // 获取资源详情
          reqMaterialDetail(id.join(",")).then(res => {
            console.log(res, "res");
            this.setPresentmsg([res.data]);
          });
        } else {
          this.setPresentmsg(this.arr);
        }
      } catch (e) {
        console.log(e);
      }
    },

页面调用导出方法(实际场景)

derive() {

// console.log(this.currentArr, '选中的图片下标数组');

// console.log(this.currentIndex, '选中的图片下标');

// if (!this.currentArr.length) {

// console.log(this.fileArr[this.currentIndex].filePath, '图片地址 ');

// downloadImage(

// this.fileArr[this.currentIndex].filePath,

// `${this.currentIndex}个图片`

// );

// }

// console.log('道出了寂寞？');

// this.currentArr.forEach((item) => {

// downloadImage(this.fileArr[item], `${item}个图片`);

// });

// 导出文件时

if (this.currentIndex !== "") {

const arr = this.currentArr;

// 如果数组里有多个下标就是多文件下载

// const current = this.fileArr[this.currentIndex];

// const { title, downFilePath } = current;

if (arr.length > 1) {

arr.forEach((item, index) => {

const current = this.fileArr[item];

console.log(current, "current");

const title = `${current.title}.${current.extension}`;

this.downloadArr.push({

...current,

percentage: 0

});

this.download(current.downFilePath, title, index);

});

} else {

const current = this.fileArr[this.currentIndex];

console.log(current, "ccccc");

const title = `${current.title}.${current.extension}`;

const { downFilePath } = current;

this.downloadArr.push({

...current,

percentage: 0

});

this.download(downFilePath, title, 0);

}

}

},

下载进度实现代码

download(url, name, index) {

this.dialogVisible = true;

Axios.get(url, {

responseType: "blob",

onDownloadProgress: event => {

this.downloadArr[index].percentage =

(event.loaded / event.total).toFixed(2) * 100;

}

}).then(res => {

const data = res.data;

console.log(res, "res");

const a = document.createElement("a");

const blob = new Blob([data]);

const url = window.URL.createObjectURL(blob);

a.href = url;

a.download = name;

a.click();

window.URL.revokeObjectURL(url);

this.dialogVisible = false;

setTimeout(() => {

// this.downloadArr = [];// 放到选中单个的时候清空了

}, 300);

});

}