vue项目使用jszip和file-saver批量打包压缩图片或附件方式
作者：小破孩呦
这篇文章主要介绍了vue项目使用jszip和file-saver批量打包压缩图片或附件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
使用jszip和file-saver批量打包压缩图片或附件
背景：
图片上传功能用户会批量上传好多个，并且图片可能还会很大，于是就采用了前端先压缩，然后将压缩包直接传给后端。
1、安装插件：
npm install jszip npm install file-saver
2、在页面中引入插件：
import JSZip from 'jszip'; import FileSaver from 'file-saver'; // 定义全局的 zip const zip = new JSZip();
注释：在引入组件的位置定义一个全局的 zip 用于文件的压缩
3、element UI 上传组件：
<el-upload
class="upload-demo"
accept=".jpg,.JPG,.png,.PNG"
action="#"
:multiple="true"
:auto-upload="false"
:on-change="handleChange1"
:show-file-list="false"
:file-list="fileList1">
<el-button size="small" type="primary">选择文件</el-button>
</el-upload>
<el-button class="handle-upload" size="small" type="primary" @click="uploadData()" :loading="loadingFile1">开始上传</el-button>4、初始化 data 数据：
export default {
data() {
return {
fileList1: [], // 待上传图片数据
}
}
}5、添加图片选择的 onchange 方法：
export default {
methods: {
// 上传图片
handleChange1(file, fileList) {
const that = this;
const _file = file.raw;
let blob = new Blob([_file], { type: _file.type});
zip.file(_file.name, blob);
this.fileList1 = fileList;
},
// 开始上传
uploadData(){
// 生成 ZIP 文件
zip.generateAsync({ type: 'blob' })
.then(function (zipBlob) {
// 在这里可以进行上传操作，将 zipBlob 发送到服务器
// 也可以通过 FileSaver.js 将 ZIP 文件保存到本地
FileSaver.saveAs(zipBlob, '压缩包名称.zip');
})
.catch(function (error) {
console.error('压缩视频失败:', error);
});
}
}
}注释：zip. 属性是在第二步中进行定义的，具体请参考第二步
至此前端附件压缩完成！！！
附加:从服务器获取附件,进行压缩下载
1、安装插件：
npm install jszip
2、在页面中引入插件：
import JSZip from 'jszip';
3、第3 、4步同上
5、添加图片选择的 onchange 方法：
export default {
methods: {
// 图片压缩前转换
imgToBuffer(url) {
return new Promise((resolve, reject) => {
const xml = new XMLHttpRequest();
xml.open('GET', url, true);
xml.responseType = 'blob';
xml.onload = function ({ currentTarget }) { //从事件对象结构出currentTarget
const { status, response } = currentTarget;
status === 200 ? resolve(response) : reject(status); // response就是转化后的
};
xml.send();
});
},
// 开始压缩
uploadData(){
const zip = new JSZip();
const imgCache = {};
const imgArr = [];
let list = [
{name: '测试图片1', url: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'},
{name: '测试图片2', url: 'https://t7.baidu.com/it/u=727460147,2222092211&fm=193&f=GIF'},
{name: '测试图片3', url: 'https://t7.baidu.com/it/u=3911840071,2534614245&fm=193&f=GIF'},
{name: '测试图片4', url: 'https://t7.baidu.com/it/u=938052523,709452322&fm=193&f=GIF'},
];
list.forEach((item) => { // urlList格式：[{url:图片链接,name:图片名称}...]
// 逐个添加文件
const promise = this.imgToBuffer(item.url).then((res) => {
zip.file(`${item.name}.${res.type.split('/').pop()}`, res, { binary: true });
imgCache[item.name] = res; // 下载文件, 并存成ArrayBuffer对象(blob)
});
imgArr.push(promise);
});
Promise.all(imgArr).then(() => {
zip.generateAsync({ type: 'blob' }).then((content) => {
saveAs(content, '压缩包名称'); // 打包压缩
this.$message.success('压缩完成');
}).catch((err) => {
this.$message.error(err.message);
});
});
}
}
}至此完成压缩下载！！！
总结
以上测试有效，感谢支持！！！
这些仅为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。