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

场景

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

实现

• 既然给的是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