前端显示后端传的图片流

后端返回样式

显示是乱码格式，但其实是图片返回就是这样

前端请求的参数

{
    url: '/make/gsppackmin/downLoadImage/' + id,
    method: 'get',
    responseType: "blob"
 }

这样返回的就是blob格式的图片了

vue代码

<div class="block">
       <el-image  style="width: 400px; height: 400px" :src="src"></el-image>
</div>

处理图片

getImage(this.rowId).then(data =>{
        const fileReader = new FileReader()
        fileReader.readAsDataURL(data.data)
        fileReader.onload = e => {
          this.src = e.target.result
        }
 })

我本来获取参数写的fileReader.readAsDataURL(data)

console.log了一下发现里面竟然还有一层

遂改为fileReader.readAsDataURL(data.data)

显示成功!!!