前端zip.js实现加密打包上传文件

shuncheng_hu

已于 2022-01-19 18:54:00 修改

阅读量5k

点赞数

文章标签：前端 javascript vue.js

于 2022-01-19 18:50:53 首次发布

本文链接：https://blog.csdn.net/shuncheng_hu/article/details/122587116

版权

本文介绍了如何在前端利用zip.js库实现文件的加密打包上传，服务端不解密，保证文件私密性。同时，讲解了解密并获取压缩文件列表以及下载指定文件的操作，但在处理大文件时可能存在错误。

摘要由CSDN通过智能技术生成

背景：一方面，部分系统对文件的私密性和安全性要求较高，实现前端加密打包，服务端不存储密码，下载时手动输入密钥并解压文件。另一方面，传输压缩包到客户端，节约了带宽，节约了传输时间。

使用的库: zip.js

Support of the Zip64 format

Support of WinZIP AES and PKWare ZipCrypto encryption

Support of simultaneous reads and writes to one or more zip files

Integrated worker pool manager

No dependencies

安装

 npm install @zip.js/zip.js

引用

import * as zip from "@zip.js/zip.js";      //ES6 module
const zip = require("@zip.js/zip.js");     // or CommonJS module

实现

以下为vue的实现方案：

加密上传文件

import * as zip from '@zip.js/zip.js'
...
...
methods: {
   
  async handleZipFile () {
   
    const controller = new AbortController()
    const signal = controller.signal
    var zipWriter = new zip.ZipWriter(new zip.BlobWriter('application/zip'))
    await Promise.all(_.map(this.files, async (file) => {
   
      await zipWriter.add(file.name, new zip.BlobReader(file.raw), {
   
        bufferedWrite: true,
        password: this.password,
        signal,
        zipCrypto: true,
        onprogress: (index, max) => {