npm install jszip
npm install file-saver  //主要用來下載文件驗證上傳是否正確，不是剛需
//頁面引入
import JSZip from "jszip";
import FileSaver from "file-saver";

<el-form-item label="上傳模板:" prop="fileName">
            <el-button @click="handleChange">上傳文件夾</el-button>
</el-form-item>

  handleChange() {
    let input = document.createElement("input");
    input.type = "file";
    input.setAttribute("allowdirs", "true");
    input.setAttribute("directory", "true");
    input.setAttribute("webkitdirectory", "true"); //設(shè)置了webkitdirectory就可以選擇文件夾進行上傳了，el-upload也適用但方法不一樣
    input.multiple = false;
    document.querySelector("body").appendChild(input);
    input.click();
    let _this = this;
    input.onchange = async function (e) {
      let file = e.target["files"];
      let path = file[0].webkitRelativePath; //取path是為了獲取上傳的文件夾一級的名稱
      let name = path.split("/")[0];
      console.log(name);
      let zip = new JSZip();
      _this.forEachZip(zip, file); //處理文件夾里的所有子文件
      // 生成壓縮文件
      zip.generateAsync({ type: "blob" }).then((content) => {
      //將blob類型的再轉(zhuǎn)為file類型用于上傳
        let zipFile = new File([content], `${name}.zip`, {
          type: "application/zip",
        });
        //做個大小限制
        let isLt2M = zipFile.size / 1024 / 1024 < 80;
        if (!isLt2M) {
          _this.fileList = [];
          _this.$message({
            message: "上傳文件大小不能超過 80MB!",
            type: "warning",
          });
          return false;
        } else {
           let filedata = new FormData();
           filedata.append("file", zipFile);
          _this.handlesubmit(filedata); //這個地方換成自己的上傳事件即可，filedata已經(jīng)是壓縮好的文件了
          // FileSaver.saveAs(content, `${name}.zip`); //下載用，可以下載下來文件查看上傳的是否正確
        }
      });
      document.querySelector("body").removeChild(input);
    };
  },
  forEachZip(zip, files) {
    for (let i = 0; i < files.length; i++) {
    //通過path將文件夾里的所有子文件歸類處理，主要是為了保持上傳后的文件夾目錄保持不變
      zip.file(files[i].webkitRelativePath, files[i]);
      //如果想上傳后將里面的所有文件夾都歸類到一級可以用下面的方式
       // let file = files[i];
      // zip.file(file.name, file);
    }
  },

npm install jszip
npm install file-saver

import { saveAs } from 'file-saver'
import JSZip from 'jszip'

<input type="file" webkitdirectory="true" directory="true" @click="onupclick" @change="uploadFiles" style="width: 70px" />

function onupclick(e: any) {
	percentage.value = 0;//上傳進度,可以使用element plus 進度條組件
	e.target.files = null;
	e.target.value = '';
}

async function uploadFiles(e) {
	let res = await zipFile(2, e.target.files);
	const file = new File([res], 'projectdist.zip');//'projectdist.zip'為設(shè)置的文件名
	upzip({ ftype: 1, file: file, mode: mode.value });
}
async function zipFile(index: number, fileList: FileList, onProgress: (added: number) => void) {
	const zip = new JSZip();
	let i = 0;
	for await (let f of fileList) {
		const fileData = await readAsArrayBuffer(f);
		zip.file(f.webkitRelativePath, fileData, { createFolders: true });
		i++;
		onProgress && onProgress(i);
	}
	return zip.generateAsync({ type: 'blob', compression: 'DEFLATE', compressionOptions: { level: 9 } }, function updateCallback(metadata) {
		// 進度條
			percentage.value = +metadata.percent.toFixed(2);
		// console.log('進度條', metadata.percent.toFixed(2) + '% done');
	});
 //zip.generateAsync({ type: 'blob' })
        //    .then(function (zipBlob) {
                // 在這里可以進行上傳操作，將 zipBlob 發(fā)送到服務(wù)器
                // 也可以通過 FileSaver.js 將 ZIP 文件保存到本地
             //   FileSaver.saveAs(zipBlob, '壓縮包名稱.zip');
            // })
             //.catch(function (error) {
            //    console.error('壓縮視頻失敗:', error);
            // });
}
async function readAsArrayBuffer(file: Blob): Promise<ArrayBuffer> {
	return new Promise((resolve, reject) => {
		let reader = new FileReader();
		reader.readAsArrayBuffer(file);
		reader.onload = () => {
			resolve(reader.result as ArrayBuffer);
		};
		reader.onloadend = () => {
			reject('FileReader failed');
		};
	});
}
//把文件上傳給服務(wù)端
async function upzip(formData: any) {
	try {
		const { code, msg } = await upload_file(formData);
		if (code > 0) {
			ElMessage({
				showClose: true,
				message: '上傳成功',
				type: 'success',
			});
		} else {
			ElMessage({
				showClose: true,
				message: '上傳失敗' + msg,
				type: 'error',
				duration: 0,
			});
		}
	} catch (e) {
		ElMessage({
			showClose: true,
			message: '錯誤: ' + e,
			type: 'error',
			duration: 0,
		});
	}
}