vue項目使用jszip和file-saver批量打包壓縮圖片或附件方式

更新時間：2024年03月08日 09:47:33 作者：小破孩呦

這篇文章主要介紹了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 數(shù)據(jù)：

export default {
    data() {
        return {
            fileList1: [], // 待上傳圖片數(shù)據(jù)
        }
    }
}

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 發(fā)送到服務(wù)器
                // 也可以通過 FileSaver.js 將 ZIP 文件保存到本地
                FileSaver.saveAs(zipBlob, '壓縮包名稱.zip');
             })
             .catch(function (error) {
                console.error('壓縮視頻失敗:', error);
             });
        }
    }
}

注釋：zip. 屬性是在第二步中進行定義的，具體請參考第二步

至此前端附件壓縮完成！?。?/p>

附加:從服務(wù)器獲取附件,進行壓縮下載

1、安裝插件：

npm install jszip

2、在頁面中引入插件：

import JSZip from 'jszip';

3、第3 、4步同上

5、添加圖片選擇的 onchange 方法：

export default {
    methods: {
        // 圖片壓縮前轉(zhuǎn)換
        imgToBuffer(url) {
           return new Promise((resolve, reject) => {
             const xml = new XMLHttpRequest();
             xml.open('GET', url, true);
             xml.responseType = 'blob';
             xml.onload = function ({ currentTarget }) { //從事件對象結(jié)構(gòu)出currentTarget
               const { status, response } = currentTarget;
               status === 200 ? resolve(response) : reject(status); // response就是轉(zhuǎn)化后的
             };
             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);
                });
            });
        }
    }
}

至此完成壓縮下載！！！