在之前的一篇文章中我们介绍了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('客户端数据'))

最后再将数据存储在服务，这样就完成了服务器与前端结合实现数据压缩及解压缩了

有遗漏或者不对的可以在我的公众号留言哦