获取二进制文件加载到页面遇到的问题记录

1. 请求后台接口获取文件数据

this.serverApi({
  loading: this.loading,
  params: data.urlImage,
  interface: this.$https.getImageUrl,
  success: (res) => {
   // 通过创建对象获取流
    iframe.src = URL.createObjectFile(res)
  }
})

 

1. 返回数据,转换成路径报错TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.

根据文件内容创建一个url,内容解析错误

解决,将文件内容定义成一个Blob

// 将返回数据转换成二进制
const blob = new Blob([res], { type: 'image/png' })
this.testUrl = URL.createObjectURL(blob)

将数据赋值到页面图片src

//根据路径加载显示图片
 <el-image :src="testUrl" />

图片路径解析失败

解决: 直接用接口当做url的内容,接口返回的就是一张图片,但是要将此接口的token去掉

this.testUrl='/api/api/files/filesearch/image/content/' + data.urlImage