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

安装包

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