前端JS_实现打包下载OSS文件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 导入需要使用的模块 -->
    <script type="text/javascript" src="./js_zip/jszip.min.js"></script>
    <script type="text/javascript" src="./js_zip/FileSaver.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <title>Document</title>
</head>
<body>
    <script>

        var zip = new JSZip();

        // 文件列表
        var baseList = ["http://photolife-imag...._photo/_DSC3087.jpg", "http://photolife....347.jpg"]

        
        function getBase64(imgUrl) {
            return new Promise(resolve => {
                window.URL = window.URL || window.webkitURL;
                var xhr = new XMLHttpRequest();
                xhr.open("get", imgUrl, true);
                // 至关重要
                xhr.responseType = "blob";
                xhr.onload = function () {
                    if (this.status == 200) {
                        //得到一个blob对象
                        var blob = this.response;
                        // 至关重要
                        let oFileReader = new FileReader();
                        oFileReader.onloadend = function (e) {
                            let base64 = e.target.result;
                            // 返回解码后的base64
                            resolve(base64)
                        };
                        oFileReader.readAsDataURL(blob);
                    }
                }
                xhr.send();

            })
        }


        async function wdc () {

            var vars = {}
            for(var i=0;i<baseList.length;i++){
                // 动态生成变量，创建文件夹
                let varName = "wdc_" + i;
                vars[varName] = zip.folder("wdc_" + i);

                vars[varName].file("hello.txt", "Hello World\n");
                // 调用解码函数
                let base_photo = await getBase64(baseList[i])
                // 将文件写入到压缩文件
                vars[varName].file(i + ".jpg", base_photo.replace(/^data:image\/\w+;base64,/, ""), {base64: true});
            }

            zip.generateAsync({type:"blob"}).then(function(content) {
                // see FileSaver.js
                saveAs(content, "aaaa.zip");
            });
        }

        
        wdc()


    </script>
</body>
</html>

 

posted @ 2021-08-04 17:27  手可摘星辰。  阅读(1346)  评论(0)    收藏  举报