前端读url链接文件的数据流

1|0场景

后台接口返回的是一个.dat文件(其他文件也差不多,这里以.dat为例),现在前端需要读这个文件的二进制数据,然后解码,进行后续操作

2|0实现

  • 既然给的是url,第一时间想到的就是先通过a标签下载文件,然后读本地文件的数据,但是众所周知,web端是没有直接读本地文件的权限的,顶多通过 input file 上传文件
  • 所以突破口应该是在请求这个url的时候,直接拿到这次请求的数据流
  • 既然是请求了,那就用axios试试,请求的url就是这个文件,用get请求,看看返回的数据是什么
readFile () { const file = '/api/test.dat' axios.get(file).then((res) => { // Blob是类文件对象,可用来存文件原始数据,不可变 const blob = new Blob([res.data]) // 从Blob中提取数据需要用FileReader,并监听load事件 var reader = new FileReader() reader.onload = function (e) { var data = e.target.result // 这里根据需求解码二进制数据即可 var u8 = new Uint8Array(data) console.log(u8) } // readAsArrayBuffer将Blob的数据以二进制的方式读出来,触发load reader.readAsArrayBuffer(blob) }).catch((err) => { console.log(err.message) }) }
  • 实践证明是可以拿到数据的
  • 这里很明显存在跨域问题,记得配置代理,这里笔者用的api就是配置了代理的
  • 作为前端,在开发环境配置代理容易,但是跨域问题,可能在生产环境也是存在的,看实际场景,笔者这里的场景就是生产环境也是跨域,所以需要后台配置nginx

__EOF__

本文作者Mizuki
本文链接https://www.cnblogs.com/mizuki-vone/p/16422093.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   Mizuki-Vone  阅读(819)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示