一个客户端实现多图下载并打zip包下载到本地的小功能-CSDN博客

首先要想的第一个问题是：客户端是否能实现这种功能。

答案很肯定：可以！

为什么可以：玩了一天这类API(太浪费时间了，害的我大周六都得不到消停，太可耻啦，啊！！！)，其实这类功能一般后台直接打包好了丢过来一个连接，a链接一跳完犊子。之所以按标题这么做完全是缓解服务器压力，服务器上的一部分工作丢到客户端来做，从而使得客户端得到更快的响应。

不解释（主要是我这人越解释越乱），贴代码：

// 示例基于react，其他框架或库使用时根据自身情况稍作改动就可以
// 在react项目下是可以直接运行的一段代码

import React from 'react'
import JSZip from 'jszip'
import { saveAs } from 'file-saver'
import axios from 'axios'
class BuildZIP extends React.Component {
    // 页面中只要渲染了该组件，直接下载zip
    componentDidMount() {
        let Urls = [
            'http://img8.zol.com.cn/bbs/upload/23766/23765836.jpg',
            'http://img4.cache.netease.com/game/2010/11/15/201011151148508a83f.jpg'
        ];
        let fetchImgurlArr = [];
        for (let url of Urls) {
            fetchImgurlArr.push(this.fetchImgUrlToBase64(url));
        }
        Promise.all(fetchImgurlArr).then(imgDatas => {
            const zip = new JSZip();
            let img = zip.folder("images");
            for(let i = 0; i< imgDatas.length; i++) {
                const Base64Data = imgDatas[i].substring(imgDatas[i].indexOf(',') + 1);
                img.file(i + ".jpg", Base64Data, { base64: true });
            }
            zip.generateAsync({ type: "blob" }).then(function(content) {
                // see FileSaver.js
                saveAs(content, "美女图片.zip");
            });
        }).catch(err => {
            console.log('结果：', err)
        })
        // this.getImage('http://img8.zol.com.cn/bbs/upload/23766/23765836.jpg')
    }
    fetchImgUrlToBase64(url) {
        return new Promise((resolve, reject) => {
            axios.get(url, { responseType: 'blob' }).then(res => {
                let reader = new FileReader()
                reader.onload = (e) => {
                    resolve(e.target.result);
                }
                reader.onerror = err => {
                    reject('读取图片发生错误');
                }
                reader.readAsDataURL(res.data);
            }).catch(err => {
                reject('请求图片发生错误');
            });
        })
    }

    // 实现方式二：只写了实现上不同的部分（请求图片 和 把图片转为base64的方式 与上边不一样）。
    // getBase64Image(img) {
    //     var canvas = document.createElement("canvas");
    //     canvas.width = img.width;
    //     canvas.height = img.height;
    //     var ctx = canvas.getContext("2d");
    //     ctx.drawImage(img, 0, 0, img.width, img.height);
    //     var dataURL = canvas.toDataURL("image/jpeg");    // 可选其他值 image/jpeg
    //     return dataURL;
    // }
    // getImage(src) {
    //     return new Promise((resolve, reject) => {
    //         var image = new Image();
    //         image.src = src + '?v=' + Math.random(); // 处理缓存
    //         image.crossOrigin = "*"; // 支持跨域图片
    //         image.onload = function (e) {
    //             console.log('onload: ', e);
    //             var base64 = this.getBase64Image(image);
    //             resolve(base64);
    //         }
    //         image.onerror = function (e) {
    //             console.log('onerror: ', e);
    //             reject(e)
    //         }
    //     })
    // }

    render() {
        return <div>
            <h1>JSZip</h1>
        </div>
    }}

export default BuildZIP;

复制代码