npm install jszip

<script lang="ts" setup>
import { ref } from 'vue'
import JSZip from 'jszip'
import { saveAs } from 'file-saver' // 注意這里我假設(shè)你已經(jīng)有file-saver庫(kù)了

interface FileData {
  file: File
  fileName: string
}

const fileDatas = ref<FileData[]>([])
const isCompress = ref(false) // 是否啟用壓縮
const compressionLevel = ref(6) // 壓縮級(jí)別
const packagingPercentage = ref(0) // 壓縮進(jìn)度

// 文件上傳處理函數(shù)
const fileUpload = (file: File) => {
  fileDatas.value.push({
    file,
    fileName: file.name
  })
}

// 打包為zip文件
const packageAsZip = async () => {
  packagingPercentage.value = 0

  const zip = new JSZip()
  fileDatas.value.forEach((fileData) => {
    zip.file(fileData.fileName, fileData.file)
    packagingPercentage.value += 100 / fileDatas.value.length // 簡(jiǎn)化進(jìn)度計(jì)算
  })

  let content: Blob

  if (isCompress.value) {
    content = await zip.generateAsync({
      type: 'blob',
      compression: 'DEFLATE',
      compressionOptions: { level: compressionLevel.value }
    })
  } else {
    content = await zip.generateAsync({ type: 'blob' })
  }

  saveAs(content, 'compressed_files.zip')
}
</script>

<template>
  <div>
    <!-- 假設(shè)你有一個(gè)文件上傳組件CommonFileUploadWithDirectory -->
    <CommonFileUploadWithDirectory @upload="fileUpload" />

    <!-- 壓縮按鈕 -->
    <button @click="packageAsZip">壓縮為ZIP</button>

    <!-- 文件列表展示 -->
    <div v-if="fileDatas.length > 0" class="file-list">
      <div v-for="(fileData, index) in fileDatas" :key="index" class="file-list-item">
        <!-- 假設(shè)你有一個(gè)刪除按鈕組件，這里用了一個(gè)簡(jiǎn)單的刪除邏輯 -->
        <button @click="fileDatas.splice(index, 1)">刪除</button>
        <span>{{ fileData.fileName }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 樣式省略 */
</style>