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

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

這篇文章主要介紹了vue項(xiàng)目使用jszip和file-saver批量打包壓縮圖片或附件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

使用jszip和file-saver批量打包壓縮圖片或附件

背景：

圖片上傳功能用戶會(huì)批量上傳好多個(gè)，并且圖片可能還會(huì)很大，于是就采用了前端先壓縮，然后將壓縮包直接傳給后端。

1、安裝插件：

npm install jszip
npm install file-saver

2、在頁(yè)面中引入插件：

import JSZip from 'jszip';
import FileSaver from 'file-saver'; 
// 定義全局的 zip
const zip = new JSZip();

注釋：在引入組件的位置定義一個(gè)全局的 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) {
                // 在這里可以進(jìn)行上傳操作，將 zipBlob 發(fā)送到服務(wù)器
                // 也可以通過 FileSaver.js 將 ZIP 文件保存到本地
                FileSaver.saveAs(zipBlob, '壓縮包名稱.zip');
             })
             .catch(function (error) {
                console.error('壓縮視頻失敗:', error);
             });
        }
    }
}

注釋：zip. 屬性是在第二步中進(jìn)行定義的，具體請(qǐng)參考第二步

至此前端附件壓縮完成！??！

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

1、安裝插件：

npm install jszip

2、在頁(yè)面中引入插件：

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 }) { //從事件對(duì)象結(jié)構(gòu)出currentTarget
               const { status, response } = currentTarget;
               status === 200 ? resolve(response) : reject(status); // response就是轉(zhuǎn)化后的
             };
             xml.send();
           });
        },
        // 開始?jí)嚎s
        uploadData(){
            const zip = new JSZip();
            const imgCache = {};
            const imgArr = [];
            let list = [
                    {name: '測(cè)試圖片1', url: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'},
                    {name: '測(cè)試圖片2', url: 'https://t7.baidu.com/it/u=727460147,2222092211&fm=193&f=GIF'},
                    {name: '測(cè)試圖片3', url: 'https://t7.baidu.com/it/u=3911840071,2534614245&fm=193&f=GIF'},
                    {name: '測(cè)試圖片4', url: 'https://t7.baidu.com/it/u=938052523,709452322&fm=193&f=GIF'},
             ];
             list.forEach((item) => { // urlList格式：[{url:圖片鏈接,name:圖片名稱}...]
                // 逐個(gè)添加文件
                const promise = this.imgToBuffer(item.url).then((res) => { 
                    zip.file(`${item.name}.${res.type.split('/').pop()}`, res, { binary: true }); 
                    imgCache[item.name] = res; // 下載文件, 并存成ArrayBuffer對(duì)象(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);
                });
            });
        }
    }
}

至此完成壓縮下載?。?！