vue实现文件解压缩

1. 使用CompressionStream API实现压缩

这里开启了多线程解压缩

<template>
  <div class="page">
    <input type="file" placeholder="选择文件" id="file" />
    <button @click="compress('compress')">压缩</button>
    <button @click="compress('decompress')">解压</button>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
let file: File | null = null; //源文件
let file_zip: Blob | null = null; //压缩后的文件
onMounted(() => {
  document.getElementById("file")?.addEventListener("change", (e: any) => {
    file = e.target.files[0];
    console.log("原始文件", file);
  });
});
let compress = async (type: string) => {
  const worker = new Worker(new URL("/src/utils/fileWorker.ts", import.meta.url));
  worker.postMessage({ file: type == "compress" ? file : file_zip, type });
  worker.onmessage = (e) => {
    let {
      data: { file, type },
    } = e;
    if (type == "compress") {
      file_zip = file;
      console.log("压缩", file);
    } else {
      console.log("解压", file);
    }
    worker.terminate();
  };
};
</script>
<style lang="less" scoped></style>

2.线程：

onmessage = async (file: any) => {
  // 向主线程发送消息
  let { file: data, type } = file.data;
  let compressStream;
  let blob;
  if (type == "compress") {
    compressStream = new CompressionStream("gzip");
  } else {
    compressStream = new DecompressionStream("gzip");
  }
  const readStream = await data?.stream();
  const compressdReadStream = readStream?.pipeThrough(compressStream);
  blob = await new Response(compressdReadStream, {
    headers:
      type == "compress"
        ? { "Content-Type": "application/gzip" }
        : { "Content-Type": "text/plain;charset=utf-8" },
  }).blob();

  postMessage({ file: blob, type });
};

3.查看压缩效果

4.好吧，压缩效果不明显，这个API没什么用