做事器对付客户端上传的数据一样平常都会有限定,例如:限定要求的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('客户端数据'))
末了再将数据存储在做事,这样就完成了做事器与前端结合实现数据压缩及解压缩了
有遗漏或者不对的可以在我的公众号留言哦