微信小程序版本更新提示

前言

不知道大家有没有遇到过后端只给了一个上传文件的接口，但是我们需要一次性存很多东西，这时候可以让后端把接口改造一下，接受多个file的方式，如果是我们前端自己搞，那就最好是把文件变成一个统一的压缩包，这里给大家介绍一个前端自己打压缩包的第三方库，jszip。

安装依赖

npm install jszip

基本使用

这里我就用我之前写过的展开文件夹的案例作为上传的底子了，这里参考
文件展开地址:https://myblog-5g89ixpbbf1fbfad-1316695488.ap-shanghai.app.tcloudbase.com/2024/03/21/file-folder-expand/

导入

import JSZip from "jszip";

使用

这里我就使用了jszip，将文件进行打包成zip，并且下载，如果是上传的话，可以把我注释掉那块打开，就可以一个标注的文件file格式，然后可以处理你自己的上传，这里为了方便，我就直接下载导出了

// 压缩并导出
const handleZipExport=()=>{
    // 如果没有文件就直接返回
    if(fileList.value.length===0){
        MessagePlugin.error("请先上传文件")
        return;
    }
    const zip=new JSZip();
    fileList.value.forEach((file)=>{
        // 生成blob对象，避免图片压缩出问题
        const blob=new Blob([file],{type:file.type});
        zip.file(file.name, blob, {binary: true});
    })
    zip.generateAsync(
        {
            type: "blob",
        }
    ).then((content)=>{
        // const fils = new File([content], "test.zip", {
        //     type: "zip",
        // });
        // console.log(fils,'fils')
        const blob=new Blob([content],{type:'application/zip'});
        const url=URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = "test.zip";
        a.click();
        URL.revokeObjectURL(url);
    })
}

进度条添加

根据你用的组件加个进度条组件即可，然后把进度条赋值上去

// 进度条颜色
const customColorMethod = {
    "0%":"#9EEFFF",
    "20%":"#9EEFFF",
    "40%":"#43A9F2",
    "60%":"#3884F8",
    "80%":"#716AF8",
    "100%":"#FF8EA9",
}
// 压缩包弹窗信息
const zipInfo=reactive({
    zipDialogVisible:false,
    percentage:0,
})

// 压缩并导出
const handleZipExport=()=>{
    // 如果没有文件就直接返回
    if(fileList.value.length===0){
        MessagePlugin.error("请先上传文件")
        return;
    }
    const zip=new JSZip();
    fileList.value.forEach((file)=>{
        // 生成blob对象，避免图片压缩出问题
        const blob=new Blob([file],{type:file.type});
        zip.file(file.name, blob, {binary: true});
    })
    // 设置个延迟，压缩太快的文件，不需要进度条
    const delay=setTimeout(()=>{
        zipInfo.zipDialogVisible=true;
    },500)
    zip.generateAsync({type: "blob"},(data)=>{
        // 这里可以获取文件的压缩进度
        zipInfo.percentage=data.percent.toFixed(2);
        if(!data.currentFile){
            clearTimeout(delay);
            zipInfo.zipDialogVisible=false; 
        }
    }).then((content)=>{
        // const fils = new File([content], "test.zip", {
        //     type: "zip",
        // });
        // console.log(fils,'fils')
        const blob=new Blob([content],{type:'application/zip'});
        const url=URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = "test.zip";
        a.click();
    })
}

进度条显示效果

zip解压缩

当然，我们可以用jszip来对我们的zip文件进行解压缩

// 文件格式和拓展名对应关系的映射对象
const fileExtensions = {
    ".xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    ".docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    ".pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
    ".xls": "application/vnd.ms-excel",
    ".doc": "application/msword",
    ".pdf": "application/pdf",
    ".txt": "text/plain",
    ".jpg": "image/jpeg",
    ".png": "image/png",
    ".gif": "image/gif",
    ".bmp": "image/bmp",
    ".webp": "image/webp",
    ".svg": "image/svg+xml",
    ".mp3": "audio/mpeg",
    ".wav": "audio/wav",
    ".ogg": "audio/ogg",
    ".mp4": "video/mp4",
    ".zip": "application/zip",
    ".rar": "application/x-rar-compressed",
    ".7z": "application/x-7z-compressed",
    ".tar": "application/x-tar",
    ".gz": "application/x-gzip",
    ".bz2": "application/x-bzip2",
    ".xz": "application/x-xz",
    ".lz": "application/x-lzip",
    ".lzma": "application/x-lzma",
    ".lzo": "application/x-lzop",
    ".lrz": "application/x-lrzip",
    ".lz4": "application/x-lz4",
    ".zst": "application/x-zstd",
    ".Z": "application/x-compress",
    ".lha": "application/x-lha",
    ".arj": "application/x-arj",
    ".cpio": "application/x-cpio",
    ".shar": "application/x-shar",
    ".iso": "application/x-iso9660-image",
    ".nrg": "application/x-nrg",
    ".img": "application/x-cd-image",
    ".mdf": "application/x-mdf",
    ".ima": "application/x-ima",
    ".timg": "application/x-timg",
    ".udf": "application/x-udf",
    ".cdl": "application/x-cdlink",
    ".cdi": "application/x-cdimage",
    ".cdinst": "application/x-cdinst",
    ".cdpack": "application/x-cdpack",
    ".cdproj": "application/x-cdproj",
    ".cdrecorder": "application/x-cdrecorder",
    ".cdrw": "application/x-cdrw",
    ".cdx": "application/x-cdx",
    // 添加更多的文件格式和拓展名对应关系
};

// 上传压缩包
const handleUploadZipChange=(event)=>{
    let files = event.target.files;
    const zip=new JSZip();
    // const blobFile=new Blob([files[0]],{type:'application/zip'});
    zip.loadAsync(files[0], { arraybuffer: true }).then((zipItem)=>{
        Object.values(zipItem.files).forEach((zipValue)=>{
           const {dir,name}=zipValue;
           // 没有层级，说明是普通文件
           if(!dir){
            // 生成base64字符串，可以根据需求生成其他类型：arraybuffer base64 string
            const base = zipItem.file(name).async('arraybuffer')
            // 将arrayBuffer字符串转为blob对象
            base.then((arrayBuffer)=>{
                // name取值最后一个/后面的值
                const fileName=name.split('/').pop();
                // 创建Blob对象,这里的type根据后缀名可以设置,我们将常用的给列举一下
                const blobType=fileExtensions['.'+name.split('.').pop()];
                console.log(blobType,'blobType')
                const blob = new Blob([arrayBuffer], { type: 'application/octet-stream' });
                // 创建File对象
                const file = new File([blob], fileName, { type: blobType||'application/octet-stream' });
                Object.assign(file,{time:new Date().toLocaleString()})
                fileList.value.push(file)
            })
           }
        })
    })
}

这里面有个细节就是我们读取压缩包的时候，需要将二进制进行保存，需要这段代码{ arraybuffer: true },然后后续生成blob和file文件的时候也需要将数据类型用arraybuffer格式来进行转化

结语

本篇文章就到这里了，更多内容敬请期待，债见~