乐趣区

Vue中使用文件流

前端使用后台返回的二进制流
  1. 请求方法中需加入 resposeType: ‘blob’
eg:this.axios.get('url', { header: '', resposeType:'blob'})
  1. 返回的 res 应是一个 Blob 对象
let blob = new Blob([res], {type: ''})
let imgUrl = window.URL.createObjectURL(blob)
// 使用后,需销毁
window.URL.revokeObjectURL()

特别注意!!!重点来了
若 res 返回的是流的乱码,类型为 String,且后台接口正常,若你使用的 Chrome,查看 Network 下 Initiator, 发起的 js 对象是是否是 xhr.js, 若是 mock.js 说明项目中有使用 mockjs, 原因是 mockjs 会对请求拦截,初始化 respnseType: ”,需注释掉项目中有用 require 或 import 引用到的地方,

eg: import Mock from 'mockjs'

之前文件下载遇到这个问题,网上的资料很少,后来查到可能是 mockjs 影响到的(人家用的是 require),然后我并没有检索到哪里有用到,所以跟咱们项目的架构师说这种方式前后台都有问题,就用了另外的方式,这次工作流程图需要用到这种方式,流程图是可以查看,但是每次都需要浏览器刷新后才能看到,原因是初始化话的数据返回的 res 都是 string 类型的二进制流乱码,经过一系列底层探索才在 Initiator 中发现了差别,mock.js 与 xhr.js, 那就说明项目中肯定用到 mockjs 了,全文检索‘mockjs’,原来好几处都用到了 import Mock from ‘mockjs’(不知道小伙伴们啥时候偷偷加的),注释后就都正常了

退出移动版