前端vue使用jszip压缩文件

前端筱攻城狮

2124人浏览 · 2022-11-14 17:59:44

前端筱攻城狮 · 2022-11-14 17:59:44 发布

一.引入element的上传文件组件

 <el-form-item label="文件">
          <el-upload
            class="upload-demo"
            drag
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            multiple
            :before-upload="beforeUpload"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div>点击上传图层文件</div>
          </el-upload>
        </el-form-item>

二.引入解压库

yarn add jszip

import * as JSZip from "jszip"

三.处理上传后的文件

const toZip = async (file) => {
  const zip = new JSZip()
  zip.file(file.name, file)

  const res = await zip.generateAsync({
    type: "blob",
    compression: "DEFLATE",
    compressionOptions: {
      level: 5
    }
  })
  console.log("res :>> ", res)
}
const beforeUpload = (file) => {
  toZip(file)
}

四.简单的html例子（直接运行）

<html>

<head>
  <title>客户端压缩文件测试</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.6.0/jszip.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>
<body>
  <span>选择文件:</span><input type="file" id="fileID" />
  <hr>
  <button onclick="toZip()">压缩选择的文件并保存</button>

  <body>
     <script>
       async function toZip() {
           var file = document.getElementById("fileID");
           var zip = new JSZip();
           console.log('file :>> ', file.files);
           zip.file(file.files[0].name, file.files[0]);
         const res= await  zip.generateAsync({
              type: "blob",
              compression: "DEFLATE", 
              compressionOptions: {
                 level: 5 
              }
           })
           console.log('res :>> ', res);
        }
     </script>
</html>

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模