Vue 项目使用 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);
                });
            });
        }
    }
}

至此完成压缩下载！！！

以上测试有效，感谢支持！！！