VUE实现点击一个按钮同时下载多个图片和视频

要实现在Vue中下载多个图像和视频的按钮，可以使用a标记的download属性来触发文件的下载。下面是一个示例实现:

<template>
  <div>
    <button @click="downloadFiles">Download Files</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filesToDownload: [
        {
          name: 'image1.jpg',
          url: 'https://example.com/image1.jpg'
        },
        {
          name: 'image2.jpg',
          url: 'https://example.com/image2.jpg'
        },
        {
          name: 'video1.mp4',
          url: 'https://example.com/video1.mp4'
        },
        {
          name: 'video2.mp4',
          url: 'https://example.com/video2.mp4'
        }
      ]
    }
  },
  methods: {
    downloadFiles() {
      this.filesToDownload.forEach(file => {
        const link = document.createElement('a')
        link.href = file.url
        link.download = file.name
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    }
  }
}
</script>

在这个例子中，我们有一个afilesToDownloaddata属性，它包含一个对象数组，每个对象代表一个要下载的文件。每个对象都有一个表示文件名称的name属性和一个表示文件url的url属性。当单击Download Files按钮时，将调用downloadFiles方法。方法迭代filesToDownload数组，创建一个临时的a元素，将其shrefattribute设置为文件的URL，将其download属性设置为文件的名称，并将其附加到文档中。Body，触发元素上的单击事件，并从document.body中删除该元素。请注意，某些浏览器可能会阻止文件的自动下载，或提示用户确认下载。在这些情况下，您可能需要修改实现来处理用户交互。

这样写会有个bug，就是有时候造成并行下载却只触发第一个文件下载，后续文件停止下载。这个时候需要运用promise+blob格式的文件，利用promise.all方法进行监控，并讲文件转成blob格式创建链接下载，以下是我成功的实例:

async downloadImages(

) {

const images = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // 图片列表

const promises = []; // Promise数组

for (let i = 0; i < images.length; i++) {

const imageSrc = require(`@/assets/${images[i]}`); // 获取图片路径

const response = await fetch(imageSrc);

const blob = await response.blob(); // 转换为Blob对象

const url = window.URL.createObjectURL(blob); // 创建URL

promises.push(fetch(url).then(res => res.blob())); // 添加Promise到数组中

}

Promise.all(promises).then(blobs => { // 所有Promise都完成后执行回调函数

for (let i = 0; i < blobs.length; i++) {

const link = document.createElement('a');

link.href = window.URL.createObjectURL(blobs[i]);

link.download = images[i];

document.body.appendChild(link);

link.click();

document.body.removeChild(link);

}

});

},