vue3 项目使用 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 arr = e.target.files[0].webkitRelativePath.split('/');
        let filename = arr[0];
        if (filename != 'dist') {
            ElMessage({
                showClose: true,
                message: '选择的文件夹错误,请重新选择',
                type: 'error',
                duration: 0,
            });
            return;
        }
   
	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( fileList: FileList, onProgress: (added: number) => void) {
    const zip = new JSZip();
    let i = 0;
//上传单个文件
    if (fileList.length === 1) {
        const fileData = await readAsArrayBuffer(fileList[0]);
        zip.file(fileList[0].name, fileData);
        i++;
        onProgress && onProgress(i);
    } else {
    //上传单个文件夹
        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);
        }
    );
}

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) {
    let config = {
        onUploadProgress: function (e) {
            console.log('进度：');
            console.log(e);
            //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
            //如果lengthComputable为false，就获取不到e.total和e.loaded
           
            if (e.progress.toFixed(2) < 1) {
                formData.pcuploadRate = e.progress.toFixed(2) * 100;
            }
           

        },
    };
    
    let param = { formData, config};
	try {
		const { code, msg } = await upload_file(param);
		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,
		});
	}
}

uploadbtn: (param: any) => {
			return request({
				url: '/upload',
				method: 'post',
				data: param.formData,
				headers: { 'Content-type': 'multipart/form-data'},
				onUploadProgress: param.config.onUploadProgress,//回调函数
			});
		},