Vue+element的单选/多选下载图片功能

scorpion_V

已于 2022-08-04 15:15:17 修改

阅读量1.4k

点赞数

分类专栏：前端 vue 文章标签： vue.js elementui javascript

于 2022-08-04 14:57:00 首次发布

本文链接：https://blog.csdn.net/scorpion_V/article/details/126159512

版权

vue 同时被 3 个专栏收录

20 篇文章 2 订阅

订阅专栏

前端

19 篇文章 0 订阅

订阅专栏

下载

1 篇文章 1 订阅

订阅专栏

实现一个下载图片的功能需求

效果图：

1.点击下载按钮触发

<div class="down">
   <el-button type="primary" @click.native="hendleDownload">
    <i class="fas fa-download">&nbsp;下载</i>
    </el-button>
 </div>

2. 前端处理文件流

hendleDownload() {
  const downloadList = this.$refs.multipleTable.selection;
   if (downloadList.length < 1) {
     this.$message({
       type: "warning",
       message: "请选中至少1张图片!",
      });
        return;
      }
      downloadOSSImage(downloadList).then((res) => {
          //创建一个Blob对象接收后端传来的文件流，.zip的类型
        const blob = new Blob([res.data], { type: "application/zip" }); 
        if ("download" in document.createElement("a")) {
          const link = document.createElement("a"); //创建a标签
          link.style.display = "none";
          // 创建下载的链接
          link.href = window.URL.createObjectURL(blob);
          link.download = "**Image.zip"
          link.setAttribute(
            "download",
            res.headers["content-disposition"].slice(21, 29)
          );
          document.body.appendChild(link);
          link.click(); //执行下载
          URL.revokeObjectURL(link.href); //释放url
          document.body.removeChild(link); //释放标签
        }
      })
    },

以上就是下载图片的操作，大家可以参考参考，有什么问题可以留言哈~可以多多关注留言一下哈~