前端接收后端返回的二进制文件容易踩的坑

如果使用axios请求必须加以下代码

export function name(query) {
  return request({
    url: "接口",
    method: "GET",
    params: query,
//如果你在使用Vue的axios库或其他HTTP请求库进行数据请求时，需要指定responseType为"arraybuffer"以接收二进制数据 
    responseType: "arraybuffer",
  });
}

上述代码中，我们使用了axios.get方法来发起GET请求，并通过responseType: 'arraybuffer'告知服务器我们希望接收二进制数据。

然后，在成功的回调函数中，我们从响应中获取二进制数据response.data，并按照之前提到的步骤，将其转换为Blob对象，并生成视频的URL。

根据具体情况，你可能需要替换示例代码中的"your-video-url"为实际的视频URL，并对返回的二进制数据进行处理或将视频URL传递给Vue组件进行播放等操作。

请注意，responseType: 'arraybuffer'只适用于支持二进制数据的HTTP请求库，并且服务器必须能够正确地响应所请求的二进制数据。

  // const blob = new Blob([data.data], { type: "video/mp4" }); // 创建Blob对象，指定文件类型
        // const videoUrl = URL.createObjectURL(blob); // 生成视频的URL
      const blob = new Blob([data.data], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet; charset=utf-8",
      });
      const videoUrl = window.URL.createObjectURL(blob);

data.data为后端返回的二进制文件  上面的注释也可以使用    该代码是将后端返回的二进制文件转换为你需要的视频/图片的url