vue实现页面上传文件夹压缩后传给服务器的操作

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"); //设置了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类型的再转为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已经是压缩好的文件了
          // 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'为设置的文件名
	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 发送到服务器
                // 也可以通过 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');
		};
	});
}
//把文件上传给服务端
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,
		});
	}
}