vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > 使用jszip和file-saver批量打包压缩图片或附件

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);
                });
            });
        }
    }
}

至此完成压缩下载!!!

总结

以上测试有效,感谢支持!!!

这些仅为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文