如何将服务器返回的二进制数据还原为可播放的音频文件？

问题根源在于axios默认会把响应体解析为UTF-8字符串，二进制音频数据经过这个解析过程后会被损坏，再转回Blob就无法正常播放。Postman能正常播放是因为它直接处理二进制响应，没有做字符串解析。

修复方案1：直接让axios返回Blob对象 #

修改axios请求配置，指定responseType: 'blob'，这样axios会直接返回Blob类型的响应数据，无需手动转换：

axios.post('/你的音频接口地址', 你的POST数据, {
  responseType: 'blob' // 核心配置，告诉axios不要解析为字符串
})
.then((res) => {
  // res.data已经是Blob类型，直接传给组件即可
  sendBlobToAnotherComponent(res.data)
})

修复方案2：用ArrayBuffer中转（备选） #

如果因为某些限制不能直接用blob类型，可以指定responseType: 'arraybuffer'，再手动转换为Blob：

axios.post('/你的音频接口地址', 你的POST数据, {
  responseType: 'arraybuffer'
})
.then((res) => {
  const blob = new Blob([res.data], { type: 'audio/mpeg' })
  sendBlobToAnotherComponent(blob)
})

额外注意：避免内存泄漏 #

在React组件中使用URL.createObjectURL后，记得在组件卸载时释放这个URL，防止内存泄漏：

import { useEffect, useState } from 'react'

function AudioPlayer({ blob }) {
  const [audioUrl, setAudioUrl] = useState('')

  useEffect(() => {
    if (blob) {
      const url = URL.createObjectURL(blob)
      setAudioUrl(url)
      // 组件卸载时释放URL
      return () => URL.revokeObjectURL(url)
    }
  }, [blob])

  return (
    <audio controls src={audioUrl}>
      你的浏览器不支持audio元素
    </audio>
  )
}

内容的提问来源于stack exchange，提问作者Willy McNamara