如何从Flask获取二进制视频文件并保存为可播放的Blob格式

问题根因 #

你的核心问题是Axios默认将响应内容按文本格式解析转码，导致返回的二进制视频数据被UTF-8编码损坏，才会出现Blob大小不一致、内容乱码无法播放的问题，从你贴的响应原始数据也能看出来，data字段已经被转成了带乱码的字符串，而不是原始二进制数据。

解决方案 #

只需要修改两处代码即可解决：

1. 修改Axios请求配置，指定响应类型为blob #

在你的submitVideo方法的axios请求配置中，新增responseType: 'blob'字段，告诉Axios不要解析响应，直接返回原始Blob对象：

axios.post('http://127.0.0.1:5000/', formData, { 
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  // 新增这一行
  responseType: 'blob'
}).then((response) => {

2. 简化响应处理逻辑 #

因为已经指定了responseType: 'blob'，此时response.data本身就是正确的Blob对象，不需要你再手动封装，直接用就行：

.then((response) => {
  // 直接取response.data即可，已经是标准Blob
  state.modelVideo = response.data;
  resolve();
})

可选优化（非必须） #

如果需要确保Flask返回的响应更规范，可以在Flask返回时加上Content-Length头，避免传输异常：

@app.route('/', methods=["POST","GET"])
def model():
    if request.method == "POST":
        video = request.files['webcam'].stream.read()
        return flask.Response(
            video, 
            mimetype='video/x-matroska',
            headers={'Content-Length': len(video)}
        )

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