先npm需要使用的插件
npm i jszip
npm i file-saver
导入
import { saveAs } from 'file-saver';
import JSZip from 'jszip'
实际操作
val是区分点击的是批量还是全部
//selPictureUrl是一个这样的数组
selPictureUrl:["https://jhy-oss.oss-cn-shenzhen.aliyuncs.com/jhws/company-1/img/xxxxx.png","https://jhy-oss.oss-cn-shenzhen.aliyuncs.com/jhws/company-1/img/64dxxx20b6cf6dxxxxx.jpeg","https://jhy-oss.oss-cn-shenzhen.aliyuncs.com/jhws/company-1/img/6xxxxxxfa570xxxx39c.jpg"]
//批量下载和全部下载按钮区分
handleAddNew (i) {
this.downloadImg(i)
},
// 批量下载图片
async downloadImg (val) {
var arr = []
var imgName = []
if (val === '1') {
if (!this.selPictureUrl.length) this.$message.warning('请至少选择一张图片')
arr = this.selPictureUrl
this.data.filter(item => {
this.selPictureUrl.forEach(v => {
if (v === item.url) {
imgName.push(item.nick.replace(/(\.png|\.jpeg|\.jpg)$/i, ''))
}
})
})
} else if (val === '2') {
const res = await listPicture({
pageNum: 1,
pageSize: 1000000000
})
arr = res.data.map(item => item.url)
imgName = res.data.map(item => item.nick.replace(/(\.png|\.jpeg|\.jpg)$/i, ''))
}
var zip = new JSZip();
// 创建images文件夹
var imgFolder = zip.folder("images");
let flag = 0 // 判断加载了几张图片的标识
for (let i = 0; i < arr.length; i++) { //遍历数组arr
this.getBase64(arr[i]).then(base64 => { //调用getBase64()方法,传入图片网络地址得到base64数据
base64 = base64.split('base64,')[1]
imgFolder.file(imgName[i] + '.png', base64, { base64: true })//自定义图片名字,存进images文件夹里面
if (flag === arr.length - 1) {
zip.generateAsync({ type: "blob" }).then((blob) => {
if (val === '1') {
saveAs(blob, "批量图片下载.zip")//自定义文件压缩包名字
} else if (val === '2') {
saveAs(blob, "全部图片下载.zip")//自定义文件压缩包名字
}
})
}
flag++
});
}
},
//传入图片地址,返回base64格式数据
getBase64 (img) {
var image = new Image();
image.crossOrigin = '*';//解决图片跨域问题
image.src = img;
return new Promise((resolve, reject) => {
image.onload = () => {
resolve(this.getBase64Image(image));
}
})
},
//创建画布,将图片渲染到画布上,再将画布转为base64格式数据返回出来
getBase64Image (img, width, height) {
var canvas = document.createElement("canvas");
canvas.width = width ? width : img.width;
canvas.height = height ? height : img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL();
return dataURL;
},
如果遇到跨域问题,如下图这种都是阿里云没有配置Access-Control-Allow-Origin为*
直接跟领导说阿里云配置安全策略将上面的这个改为*即可