效果
安装 npm install jszip
npm install file-saver
<template>
<div>
<div class="upload-imgzip">
<input type="file"
@change="handleImg"
ref="fileInput"
class="file-input"
accept="image/*"
/>
</div>
<Button @click="newZipFile">aa</Button>
</div>
</template>
<script>
import JSZip from 'jszip';
import FileSaver from "file-saver";
export default {
props: {
},
data() {
return {
faceImg: '',
faceFile: [],
allFile: []
};
},
watch: {
},
computed: {
},
mounted() {
},
methods: {
/**
* 将图片处理
*/
handleImg(e) {
let file = e.target.files[0];
console.log(file);
this.allFile.push(file);
let _this = this;
//maxSize是压缩得设置，设置图片得最大宽度和最大高度，等比缩放，level质量，数值越小质量越低
let maxSize = {
width: 1000, height: 1000, level: 0.8};
//判断 文件大小 限制最大10M
if(file.size > 10 * 1024 * 1024) {
this.$Message.error('文件大小不超过10M');
return;
}
//压缩图片
let fileReader = new FileReader();
fileReader.onload = function() {
_this.faceImg = fileReader.result.toString();
let IMG = new Image();
IMG.src = this.result;
let imgWidth = 0,imgHeight = 0;
IMG.onload = function() {
let w = this.naturalWidth, h = this.naturalHeight;
if(w > maxSize.width || h > maxSize.height) {
let multiple = Math.max(w / maxSize.width, h / maxSize.height);
imgWidth = w / multiple;
imgHeight = h / multiple;
let canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = imgWidth;
canvas.height = imgHeight;
ctx.drawImage(this, 0, 0, imgWidth, imgHeight);
let base64 = canvas.toDataURL('image/jpeg', maxSize.level || 1);
// _this.faceFile.push(_this.convertBlob(window.atob(base64.split(',')[1])));
_this.faceFile.push(base64);
} else {
_this.faceFile.push('');
}
}
}
fileReader.readAsDataURL(file);
},
// /**
// * 图片 base64 -> blob 二进制对象
// */
// convertBlob(base64) {
// let buffer = new ArrayBuffer(base64.length);
// let ubuffer = new Uint8Array(buffer);
// for (let i = 0; i < base64.length; i++) {
// ubuffer[i] = base64.charCodeAt(i);
// }
// let blob;
// try {
// blob = new Blob([buffer], { type: 'image/jpg' });
// } catch (e) {
// window.BlobBuilder =
// window.BlobBuilder ||
// window.WebKitBlobBuilder ||
// window.MozBlobBuilder ||
// window.MSBlobBuilder;
// if (e.name === 'TypeError' && window.BlobBuilder) {
// let blobBuilder = new BlobBuilder();
// blobBuilder.append(buffer);
// blob = blobBuilder.getBlob('image/jpg');
// }
// }
// return blob;
// },
newZipFile() {
let zip = new JSZip();
//向zip文件中添加图片，可以添加多个文件或者图片，此处以图片为例
//base64图片需要去掉base64图片标识
let imgStr = this.faceFile[0] ? this.faceFile[0].substring(this.faceFile[0].indexOf(',')+1) : this.faceImg.substring(this.faceImg.indexOf(',')+1)
zip.file(this.allFile[0].name,imgStr,{
base64: true});
zip.generateAsync({
type: 'blob', //压缩类型
compression: 'DEFLATE', // STORE：默认不压缩 DEFLATE：需要压缩
compressionOptions: {
level: 9 压缩等级1~9 1压缩速度最快，9最优压缩方式
// [使用一张图片测试之后1和9压缩的力度不大，相差100字节左右]
}
})
.then(function(content) {
console.log(content);
// 压缩的结果为blob类型（二进制流）,可用作文件上传
// 直接在浏览器打成***.zip包并下载，saveAs依赖的js是FileSaver.js
saveAs(content,'dd.zip');
})
}
},
};
</script>
<style lang="scss" type="text/scss">
</style>
思路： 这边只需要将图片拿到base64(当然也可以将图片压缩一下），然后利用jszip将文件名，base64传递进去，单张图片压缩成zip，这只是写的一个小demo,当然一般需要是多张图片，打包成zip.
多张图片打包成zip
<template>
<div>
<div class="upload-imgzip">
<input type="file"
@change="getFaceImg"
ref="fileInput"
class="file-input"
accept="image/*"
:multiple="multiple"/>
</div>
<Button @click="newZipFile">aa</Button>
</div>
</template>
<script>
import JSZip from 'jszip';
import FileSaver from "file-saver";
export default {
props: {
},
data() {
return {
multiple: true,
faceImg: [],
faceFile: [],
allFile: []
};
},
watch: {
},
computed: {
},
mounted() {
},
methods: {
getFaceImg(e) {
Object.keys(e.target.files).map(async(key) => {
await this.handleImg(e.target.files[key]);
})
},
/**
* 将图片处理
*/
handleImg(file) {
let _this = this;
this.allFile.push(file);
//maxSize是压缩得设置，设置图片得最大宽度和最大高度，等比缩放，level质量，数值越小质量越低
let maxSize = {
width: 1000, height: 1000, level: 0.8};
//判断 文件大小 限制最大10M
if(file.size > 10 * 1024 * 1024) {
this.$Message.error('文件大小不超过10M');
return;
}
//压缩图片
let fileReader = new FileReader();
fileReader.onload = function() {
_this.faceImg.push(fileReader.result.toString()); //未压缩得base64
let IMG = new Image();
IMG.src = this.result;
let imgWidth = 0,imgHeight = 0;
IMG.onload = function() {
let w = this.naturalWidth, h = this.naturalHeight;
if(w > maxSize.width || h > maxSize.height) {
let multiple = Math.max(w / maxSize.width, h / maxSize.height);
imgWidth = w / multiple;
imgHeight = h / multiple;
let canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = imgWidth;
canvas.height = imgHeight;
ctx.drawImage(this, 0, 0, imgWidth, imgHeight);
let base64 = canvas.toDataURL('image/jpeg', maxSize.level || 1);
_this.faceFile.push(base64);
// _this.faceFile.push(_this.convertBlob(window.atob(base64.split(',')[1])));
} else {
// _this.faceFile.push(file);
_this.faceFile.push('');
}
}
}
fileReader.readAsDataURL(file);
},
// /**
// * 图片 base64 -> blob 二进制对象
// */
// convertBlob(base64) {
// let buffer = new ArrayBuffer(base64.length);
// let ubuffer = new Uint8Array(buffer);
// for (let i = 0; i < base64.length; i++) {
// ubuffer[i] = base64.charCodeAt(i);
// }
// let blob;
// try {
// blob = new Blob([buffer], { type: 'image/jpg' });
// } catch (e) {
// window.BlobBuilder =
// window.BlobBuilder ||
// window.WebKitBlobBuilder ||
// window.MozBlobBuilder ||
// window.MSBlobBuilder;
// if (e.name === 'TypeError' && window.BlobBuilder) {
// let blobBuilder = new BlobBuilder();
// blobBuilder.append(buffer);
// blob = blobBuilder.getBlob('image/jpg');
// }
// }
// return blob;
// },
newZipFile() {
let zip = new JSZip();
//向zip文件中添加图片，可以添加多个文件或者图片，此处以图片为例
//base64图片需要去掉base64图片标识
this.allFile.forEach((item,index) => {
let imgStr = this.faceFile[index] ? this.faceFile[index].substring(this.faceFile[0].indexOf(',')+1) : this.faceImg[index].substring(this.faceImg[index].indexOf(',')+1);
zip.file(this.allFile[index].name,imgStr,{
base64: true});
})
zip.generateAsync({
type: 'blob', //压缩类型
compression: 'DEFLATE', // STORE：默认不压缩 DEFLATE：需要压缩
compressionOptions: {
level: 9 压缩等级1~9 1压缩速度最快，9最优压缩方式
// [使用一张图片测试之后1和9压缩的力度不大，相差100字节左右]
}
})
.then(function(content) {
console.log(content);
// 压缩的结果为blob类型（二进制流）,可用作文件上传
// 直接在浏览器打成***.zip包并下载，saveAs依赖的js是FileSaver.js
saveAs(content,'dd.zip');
})
}
},
};
</script>
<style lang="scss" type="text/scss">
</style>