Vue 项目使用 jszip 和 file-saver 打包压缩上传文件夹

安装包

npm install jszip
 
npm install file-saver

引入包

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

1.设置input上传文件

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

2.当我们上传完,必须的刷新页面才能继续上传,只需要设置下面的即可,再次上传

function onupclick(e: any) {
	percentage.value = 0;//上传进度,可以使用element plus 进度条组件
	e.target.files = null;
	e.target.value = '';
}

3.设置上传函数

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,
		});
	}
}