Axios使用get方法拿API返回的content-type: “video/mpeg4“类型的数据并保存

1.问题描述

直接使用axios call 此API

APIServer.interceptors.request.use((req)=>{
                    req.headers['Authorization'] = author
                    console.log('cgi request',req)
                    return req
                })
APIServer.get(url)  //返回的是一个Promise
            .then(function(res){console.log(res)})
.catch(err=>console.log(err))

那么拿到的数据结果就是：

 这样子的结果不仅res.data是一堆看似是十六进制还夹杂着乱码的数据，而且数据大小远超该MP4文件的大小（约20MB）

如果你的情况是这样子，那么就继续向下看吧。

2.误区

首先因为数据太大，我以为拿错了数据，于是抓了包看了一下，emm，包里的数据是20MB左右，证明所拿数据没有错。

之后我尝试分析数据的编码类型，将其转换为二进制数据，然后通过blob下载到本地。

但是菜狗如我根本分析不出来这玩意到底是什么编码的，unicode，UTF-8，ASCII码我都看了，知道一些编码原理了，但是和实际一结合，我不禁开始思考我刚刚看了什么玩意，怎么还是看不出来。

在网上找到了一个字符串转二进制的code（好像能转，但是还是不对，下载的视频无法播放，但是因为能用，就先记下来了）

        function stringToArrayBuffer(str) {
        var buf = new ArrayBuffer(str.length);
        var bufView = new Uint8Array(buf);
    
        for (var i=0, strLen=str.length; i<strLen; i++) {
            bufView[i] = str.charCodeAt(i);
        }
    
        return buf;
    }

3.正确解法

感谢感谢，在我自身知识储备不足和百度并分析了六个小时之后，机缘巧合想知道为啥我这边console上不显示content-disposition header，然后就发现了这位

GQguoqi 博主，听我说，谢谢你，感谢有你，温暖了四季，大恩大德无以为报，大哥我是你粉丝了。

原来是少了responseType参数。

APIServer.get(url,{responseType: 'blob'})
                        .then(function(res){
                          var content = new Blob([res.data])
                            var objectUrl = window.URL.createObjectURL(content)
                            console.log('object url',objectUrl)
                            var a = document.createElement('a')
                            a.href = objectUrl
                            a.download = camera.filelist.TriggerTime[i]+'-t'+'.mp4'
                            a.click()
                            a.remove()
}

大哥俺给你磕一个！！！砰砰砰！！！

记录下来完全就是想多加几个关键字，帮助其他也深受困扰的宝子。下面附上这个大哥的文章链接，感觉有帮助请给这个大哥点个赞。

参考博文：

a标签/js下载文件（2020）_GQguoqi的博客-CSDN博客

js无法获取响应header的Content-Disposition字段（2020）_GQguoqi的博客-CSDN博客_获取content-disposition