gin 前端文件打包

开始

OSSOSSLinuxOSSAPI

解决方法：

PHPfetchaipsdPHPfetchfetch

---

前提

OSSCDNCDNCDN

---

步骤

AJAXdist/github

// 引入文件
<script type="text/javascript" src="/xxx/jszip.min.js"></script>
<script type="text/javascript" src="/xxx/jszip-utils.min.js"></script>
<!--[if IE]>
<script type="text/javascript" src="/xxx/jszip-utils-ie.min.js"></script>
<![endif]-->
<script>
let total = 0;
let progress = 0;

// 可通过按钮或者其它事件触发
$.get('/urls', function(res) {

    // 假设 res.data 是后端返回的一组远程数据对象
    // {url: 'x.jpg', filename: 'xx.jpg', path: 'xxxx'}

    total = res.data.length;
    if (total === 0) {
        console.error('图集无图片可下载');
        return;
    }

    let zip = new JSZip();
    // map 存储 folder 对象
    let folderMap = {};
    // 遍历所有后端返回的 urls
    res.data.map(function (data) {

        // 获取远程资源数据
        JSZipUtils.getBinaryContent(
            data.url,
            function (err, binData) {

                ++ progress;

                if (err && progress < total) {
                    console.log(err);
                    return;
                }

                // 第一次实例化 folder 对象
                if (! folderMap[data.path]) {
                    folderMap[data.path] = zip.folder(data.path);
                }

                let pf = folderMap[data.path];
                // 第三个参数必须设置，否则下载的文件将产生错误
                pf.file(data.filename, binData, {binary: true});

                if (progress === total) {

                    console.log('请稍等，数据打包中');
                    zip.generateAsync({type:"blob"}).then(function(content) {

                        // 下载文件
                        const link = document.createElement('a');
                        link.href = window.URL.createObjectURL(content);
                        link.download = 'data.zip';
                        link.click();
                        document.body.removeChild(link);
                    });
                }


            }
        );
    })
})
</script>

---

完成之后，发现效果还不错。速度也比后端的来的块。毕竟不经过后端。而且可以多个请求异步处理。