如何将Java API返回的视频字节数组在ReactJS中转换为视频文件

步骤1：调整前端请求配置，指定响应类型 #

请求Java接口时必须明确指定接收二进制响应，否则默认按文本格式解析会出现乱码，两种常用请求工具的写法如下：

• fetch 写法

const getVideo = async () => {
  const res = await fetch('你的Java接口地址', {
    method: 'GET' // 按实际接口的请求方式调整
  })
  // 直接将响应读取为ArrayBuffer，对应Java返回的字节数组
  const videoBuffer = await res.arrayBuffer()
}

• axios 写法

import axios from 'axios'

const getVideo = async () => {
  const res = await axios.get('你的Java接口地址', {
    // 关键配置：指定响应类型为arraybuffer，不要使用默认的json类型
    responseType: 'arraybuffer'
  })
  const videoBuffer = res.data
}

步骤2：将字节数组转换为视频可识别的资源地址 #

拿到ArrayBuffer格式的字节数组后，先转为Blob对象，再生成临时资源地址即可给video标签使用：

// 第二个参数需要和Java端返回的Content-Type对应，常见MP4视频为video/mp4
const videoBlob = new Blob([videoBuffer], { type: 'video/mp4' })
// 生成临时资源地址
const videoUrl = URL.createObjectURL(videoBlob)
// 存入React state即可给页面元素调用
setVideoSrc(videoUrl)

步骤3：页面渲染视频 #

直接将生成的资源地址赋值给video标签的src属性即可正常播放：

<video controls src={videoSrc} style={{ width: '800px' }} />

注意事项 #

• Java端返回接口时建议正确设置Content-Type响应头，比如MP4视频设置为video/mp4，避免前端Blob类型不匹配导致无法播放
• 页面卸载或者无需使用视频资源时，记得调用URL.revokeObjectURL(videoSrc)释放内存，避免内存泄漏：

useEffect(() => {
  return () => {
    if (videoSrc) URL.revokeObjectURL(videoSrc)
  }
}, [videoSrc])

• 如果需要将字节数组保存为本地视频文件，可以配合a标签实现下载：

const a = document.createElement('a')
a.href = videoUrl
a.download = '视频文件.mp4'
a.click()
URL.revokeObjectURL(videoUrl)

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