请求接口时传给后端的入参报文太大怎么办,用CompressionStream试试?

背景

  • 由于业务的特性,导致需要一次给接口传40M的报文,但是由于后端网关平台的限制,报文限制在了10M,因此将这么大的报文传给后端,后端是接收不到的。
  • 于是决定将入参报文转成一个txt文件,将文件上传到文件中心,然后得到文件中心的url地址,再将这个地址传给后端,后端再去解析这个文件。

使用CompressionStream压缩

  • 将入参转成file对象,并生成txt文件
js 复制代码
params2File(content, fileName, mimeType) {
  // 1. 将字符串转换为 Blob 对象
  const blob = new Blob([content], { type: mimeType })
  // 2. 将 Blob 转换为 File 对象
  const file = new File([blob], fileName, { type: mimeType })
  return file
}
  • 压缩生成的文件
js 复制代码
async compressFile(file) {
  const stream = file.stream()
  const compressedStream = stream.pipeThrough(new CompressionStream('gzip'))
  const chunks = []
  const reader = compressedStream.getReader()
  while (true) {
    const { done, value } = await reader.read()
    if (done) break
    chunks.push(value)
  }
  // 压缩成gzip文件
  return new Blob(chunks, { type: 'application/gzip' })
},
blobToFile(blob, fileName) {
  return new File([blob], fileName, {
    type: blob.type,
    lastModified: Date.now(),
  })
}
  • 函数调用
js 复制代码
const file = await this.params2File(JSON.stringify(params), '入参.txt', 'text/plain')
const compressedBlob = await this.compressFile(file)
// 生成gzip压缩包
const compressedFile = this.blobToFile(
compressedBlob,
`${file.name}.gz` // 例如:example.txt.gz
)
  • CompressionStream的压缩率还是非常高的,40M的文件可以压缩到2.9M,压缩率在93%

  • 文件上传,具体参数根据自己的项目来

js 复制代码
let formData = new FormData()
formData.append('xxx', 'xx')
formData.append('num', 1)
formData.append('token', 'xxxx')
formData.append('x-uid', 'xxxx')
formData.append('file', compressedFile)
let result = await axios.post('/upload', formData)

使用DecompressionStream解压

js 复制代码
async getFile(url) {
    const response = await fetch(url)
    if (!response.ok) throw new Error('网络请求失败')
    const responseData = await this.decompressGzip(response)
},
// 解压 gz 文件
async decompressGzip (response) {
  const decompressionStream = new DecompressionStream('gzip')
  const decompressedStream = response.body.pipeThrough(decompressionStream)
  const result = await new Response(decompressedStream).json()
  return result
},
  • 解压效率也是很快的一个原始文件压缩前是60M,解压这个文件花费的时间大概在400-800毫秒
  • 如果是后端压缩的文件,使用这个api也是能解压的,前提是后端也是使用gzip压缩,如果是zip是解压不了的
相关推荐
江城开朗的豌豆6 分钟前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
这里有鱼汤13 分钟前
首个支持A股的AI多智能体金融系统,来了
前端·python
袁煦丞14 分钟前
5分钟搭建高颜值后台!SoybeanAdmin:cpolar内网穿透实验室第648个成功挑战
前端·程序员·远程工作
摸鱼仙人~15 分钟前
Vue.js 指令系统完全指南:深入理解 v- 指令
前端·javascript·vue.js
前端进阶者16 分钟前
支持TypeScript并打包为ESM/CommonJS/UMD三种格式的脚手架项目
前端
星空下的曙光16 分钟前
pnpm vs npm区别对比
前端·npm·node.js
啃火龙果的兔子17 分钟前
React 图标库发布到 npm 仓库
前端·react.js·npm
江城开朗的豌豆18 分钟前
Vue列表渲染的坑:为什么不能用index当key?血泪教训总结!
前端·javascript·vue.js
JiaLin_Denny19 分钟前
如何在在NPM发布一个React组件
前端·react.js·npm·npm组件·npm发布·npm发布组件·npm如何发布组件
第六页第七页序19 分钟前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js