2020-12-30

最新推荐文章于 2022-11-18 09:37:48 发布

cybcc

最新推荐文章于 2022-11-18 09:37:48 发布

阅读量167

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/cybcc/article/details/111978626

该博客介绍了如何在前端通过axios从后端接口获取mp4文件流，并利用Blob对象和URL.createObjectURL方法进行文件下载。主要步骤包括将axios请求的responseType设置为'blob'，然后创建a标签，利用Blob生成URL，最后触发a标签下载。这是一个关于前端文件处理和下载技术的实践案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载mp4文件流

问题：前端下载后端接口数据中的文件流

1.　首先在axios.post的请求中把默认的 " responseType:‘json’ " 改为" responseType:‘blob’

axios({
     method: 'get',
     url: debug.servers + '/TinklingCat/api/rechargeManage/exportPertrolRecord',
     responseType: 'blob',
     params: submitForm
})

2.请求成功之后下载视频流

Blob对象可以看做是存放二进制数据的容器，此外还可以通过Blob设置二进制数据的MIME类型。

通过url下载文件
window.URL对象可以为Blob对象生成一个网络地址，结合a标签的download属性，可以实现点击url下载文件

.then((res) => {
    if (!res) {
        return
    }    

   const blob = new Blob([res.data]);
   const fileName1 = fileName+'.mp4'; //下载文件名称
   const elink = document.createElement("a");
   elink.download = fileName1;
   elink.style.display = "none";
   elink.href = URL.createObjectURL(blob);
   document.body.appendChild(elink);
   elink.click();
   URL.revokeObjectURL(elink.href); // 释放URL 对象
   document.body.removeChild(elink);

})