在之前的一篇文章中我们介绍了PHP压缩函数的使用，但是只是说了服务相关的应用，今天我们结合前端实现数据压缩传输。
服务器对于客户端上传的数据一般都会有限制，例如：限制请求的body大小的限制，限制key数量等.
如果我们将数据压缩后再传回给服务器，这样就能规避很多限制的问题。
今天我们就结合前端实践一下数据压缩传输！
服务器压缩：
服务器压缩函数有三个，不了解的可以看看我之前的文章【php压缩函数总结与实际应用】。这里以【gzinflate】为例：
base64_encode(gzdeflate('待压缩的内容'))复制
注意：待压缩的内容必须是字符串，压缩后的内容需要进行base64编码以防其他问题出现
前端解压缩
由于服务器返回的是base64格式的数据，我们需要进行base64解码：
// base64字符串转为uint8array数组 function base64ToUint8Array(base64String) { let padding = '='.repeat((4 - base64String.length % 4) % 4); let base64 = (base64String + padding) .replace(/\-/g, '+') .replace(/_/g, '/'); let rawData = window.atob(base64); let outputArray = new Uint8Array(rawData.length); for (var i = 0; i < rawData.length; ++i) { outputArray[i] = rawData.charCodeAt(i); } return outputArray; }复制
base64解码之后，就可以使用【pako】进行解压缩。前端需要安装【pako】扩展：
npm install pako复制
安装好解压缩扩展后，我们就可以使用【pako】进行解压缩：
pako.inflateRaw(base64ToUint8Array(res.data.description),{to:'string'})复制
前端压缩数据
上面我们已经实现服务器压缩数据，客户端解压缩。但是客户端还没有实现数据压缩，服务器解压缩数据。
首先使用【pako】扩展压缩数据：
pako.deflateRaw('压缩的内容', {to:'string'})复制
获得压缩数据后再将数据转base64格式，上传base64格式数据：
// uint8array转为base64字符串 function uint8arrayToBase64(u8Arr) { return window.btoa(u8Arr); } //数据压缩并将压缩后的内容转base64编码 uint8arrayToBase64(pako.deflateRaw('压缩内容', {to:'string'}))复制
服务器解压缩
服务接受的时base64格式的数据，所以我们需要先base解码，再将数据解压缩：
gzinflate(base64_decode('客户端数据'))复制
最后再将数据存储在服务，这样就完成了服务器与前端结合实现数据压缩及解压缩了
希望这篇文章可以帮到正在阅读的你，如果觉得此文对你有帮助，可以分享给你身边的朋友，同事，你关心谁就分享给谁，一起学习共同进步~~~
欢迎关注我的公众号【编程经验共享】，第一时间一起学习新知识！
————————————————————————————
公众号：编程经验共享
墨天轮：https://www.modb.pro/u/545037
个人博客：https://www.motui8.cn/
————————————————————————————
