前端vue使用jszip压缩文件

前端筱攻城狮

已于 2022-11-15 10:06:40 修改

阅读量1.7k

点赞数

文章标签： vue.js javascript elementui

于 2022-11-14 17:59:44 首次发布

本文链接：https://blog.csdn.net/qq_26018335/article/details/127852205

版权

一.引入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>