资讯专栏INFORMATION COLUMN

如何在vue项目中使用jszip对文件进行加压和解压

BLUE / 1719人阅读

摘要:以字符串形式输出文本内容使用二进制数组存储文本内容以上的方法都是实例,可以用方法指定状态的回调函数。先将图片转换为格式使用,再将其转换为二进制流进行加压。

jszip-in-vue

本文主要介绍jszip在vue中如何使用

本文涉及到Promise对象和async函数的使用,建议先提前去了解一下

关于jszip的使用官方文档已经介绍的非常详细了,而且也有示例:https://stuk.github.io/jszip/...

我这里主要是结合项目的需求然后抽离出来的demo,主要是对图片的加压和解压

解压

使用.loadAsync(data)可以加载zip文件,data必须是二进制流,我这里是使用html原生的input上传文件来获取文件流,如果需要读取本地文件可以使用JSZipUtils.getBinaryContent(zipPath, callback)

JSZipUtils.getBinaryContent("path/to/content.zip", function(err, data) {
    if(err) {
        throw err; // or handle err
    }

    JSZip.loadAsync(data).then(function () {
        // ...
    });
});

// or, with promises:

new JSZip.external.Promise(function (resolve, reject) {
    JSZipUtils.getBinaryContent("path/to/content.zip", function(err, data) {
        if (err) {
            reject(err);
        } else {
            resolve(data);
        }
    });
}).then(function (data) {
    return JSZip.loadAsync(data);
})
.then(...)

使用.file(name).async()读取文件里面的内容。

zip.file("hello.txt").async("string").then(function (data) {
  // 以字符串形式输出文本内容
});

if (JSZip.support.uint8array) {
  zip.file("hello.txt").async("uint8array").then(function (data) {
    // 使用二进制数组存储文本内容
  });
}

以上的方法都是Promise实例,可以用then方法指定resolved状态的回调函数。

本示例中通过上传文件获取文件并将其解压将文件内容显示在页面上

const zipFile = e.target.files[0]
const jszip = new JSZip()
jszip.loadAsync(zipFile).then((zip) => { // 读取zip
    for (let key in zip.files) { // 判断是否是目录
        if (!zip.files[key].dir) {
            if (/.(png|jpg|jpeg|gif)$/.test(zip.files[key].name)) { // 判断是否是图片格式
                let base = zip.file(zip.files[key].name).async(
                    "base64") // 将图片转化为base64格式
                base.then(res => {
                    this.dataList.push({
                        fileName: zip.files[key].name,
                        type: "img",
                        content: `data:image/png;base64,${res}`
                    })
                })
            }
            if (/.(txt)$/.test(zip.files[key].name)) { // 判断是否是文本文件
                let base = zip.file(zip.files[key].name).async(
                    "string") // 以字符串形式输出文本内容
                base.then(res => {
                    this.dataList.push({
                        fileName: zip.files[key].name,
                        type: "text",
                        content: res
                    })
                })
            }
        }
    }
})
加压

使用.file(name, content)将内容写进文件

zip.file("Hello.txt", "Hello world
");

使用.generateAsync(option)将文件转换为流文件,并使用FileSaver的saveAs(content, fileaname)将文件保存到本地

zip.generateAsync({type:"blob"})
.then(function (blob) {
    saveAs(blob, "hello.zip");
});

本示例主要是对图片进行加压。先将图片转换为base64格式(使用canvas),再将其转换为二进制流进行加压。因为是使用img.onload异步加载图片,必须等待图片加载完后才能将其进行加压,所以需要用async函数将异步转换为同步。

/**
 *
 * @param url 图片路径
 * @param ext 图片格式
 * @param callback 结果回调
 */
async getUrlBase64(url, ext) {
    return new Promise((resolve, reject) => {
        var canvas = document.createElement("canvas") // 创建canvas DOM元素
        var ctx = canvas.getContext("2d")
        var img = new Image()
        img.crossOrigin = "Anonymous" // 处理跨域
        img.src = url
        img.onload = () => {
            canvas.width = img.width // 指定画板的高度,自定义
            canvas.height = img.height // 指定画板的宽度,自定义
            ctx.drawImage(img, 0, 0) // 参数可自定义
            var dataURL = canvas.toDataURL("image/" + ext)
            resolve(dataURL) // 回调函数获取Base64编码
            canvas = null
        }
    })
},
async exportZip() {
    const imgList = this.imgList
    const proList = []
    const zip = new JSZip()
    const cache = {}
    await imgList.forEach(item => { // 等待所有图片转换完成
        const pro = this.getUrlBase64(item, ".jpg").then(base64 => {
            const fileName = item.replace(/(.*/)*([^.]+)/i,"$2")
            zip.file(fileName, base64.substring(base64.indexOf(",") + 1), {
                base64: true
            })
            cache[fileName] = base64
        })
        proList.push(pro)
    })
    Promise.all(proList).then(res => {
        zip.generateAsync({
            type: "blob"
        }).then(content => { // 生成二进制流
            saveAs(content, "images.zip") // 利用file-saver保存文件
        })
    })
}

以上读取和保存文件的方法只使用于在浏览器中使用,如果需要在node.js中读取和保存文件的话可以使用node.js内置模块fs。

以上,如果有错误的地方欢迎指正

GitHub地址

https://github.com/1366053981...

参考文档

https://blog.csdn.net/qq_3285...

https://segmentfault.com/a/11...

博客地址
CSDN

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106427.html

相关文章

  • 说一说前端文件压缩

    摘要:因为异步压缩的时候我们上传的文件的数量不定,所以上面需要使用关键字来修饰压缩过程。而下面的压缩过程的实现,最终返回一个对象,当压缩过程已完成后,完整的生成的文件存于其中。 基于JSZip的前端文件压缩 1. 简介: 这段时间,项目需要做一个这样的功能:客户端在上传文件的时候(具体文件类型),需要对文件进行压缩再上传以节省带宽和服务器端资源,完成这个功能,我们选择了GitHub上的JSZ...

    Ververica 评论0 收藏0
  • JS实现页面查看zip文件的内容

    摘要:前言业务场景附件上传到服务器后,在页面中可直接查看中的文件内容,如。实现原理引入工具库查看中内容查看在中引入,其中在使用中的指向进行了重定向。是要查看的文件名后缀。这里使用了定义的来展示。若不足之处,欢迎大家指出,共勉。 1 前言 1.1 业务场景 附件zip上传到服务器后,在页面中可直接查看zip中的文件内容,如:readme.txt。 2 实现原理 2.1 引入工具库 jszip、...

    Arno 评论0 收藏0
  • 关于前端实现文件下载功能

    摘要:问题以上两种方式,当在下载格式,或者视频文件时,浏览器会直接播放该文件,而达不到直接下载的功能,此时,当下载音视频文件时无法使用以上两种方式。 1、通过window.open()打开新页面下载文件 window.open(`url`, _self) 使用场景:下载excel文件,后端提供接口,接口返回的是文件流,可以直接使用window.open(),最简单的方式。 优点:最简洁; 弊...

    Arno 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<