点击下载-----向后台发出请求-----后台返回图片的文件流-----转为图片-----下载图片
1. template
<template>
<div>
<el-button type="primary" size="mini" @click="downLoadImgs"
>照片下载</el-button>
<div v-for="infoImg in photoList" :key="infoImg.id">
<el-checkbox-group v-model="checkList">
<el-checkbox :label="infoImg">
<img :src="infoImg.imageUrl" alt="" />
</el-checkbox>
</el-checkbox-group>
</div>
</div>
</template>
2.script
data() {
return {
checkList: [],
};
},
methods: {
downLoadImgs() {
this.$confirm("确定下载影像吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
// 单张图片循环下载
this.checkList = this.checkList.map(({ path }) => {
this.$request("downloadImg", { Key: path }).then((res) => {
const blob = new Blob([res.data]);
const fileName = "qudaoerweima.jpg";
if ("download" in document.createElement("a")) {
// 非IE下载
const dlink = document.createElement("a");
dlink.download = fileName;
dlink.style.display = "none";
dlink.href = URL.createObjectURL(blob);
document.body.appendChild(dlink);
dlink.click();
URL.revokeObjectURL(dlink.href); // 释放URL 对象
document.body.removeChild(dlink);
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName);
}
this.$message.success("下载影像成功");
});
});
})
.catch(() => {});
},
}
3.api.js
export default [
{
/** 下载图片 **/
name: "downloadImg",
url: "/api/Download",
method: "get",
responseType: "blob", // 下载文件流
// pem: true,
},
]