【图片流转成图片】vue处理后端传来的图片流信息并转换成图片显示在前端页面上【详细解释】

前言：今天遇到的后端传一个二维码图片给我，然后给我的是图片流的形式，看起来跟一堆乱码一样，根本用不了，必须要处理转换后才能使用，然后我看了网上帖子有的说的不是很明白，可能新人看不懂，我就也写一个详细解释一下。也避免时间久了我自己忘记了可以回来轻松的看一下。

效果图：后端发过来的数据

就是这么一长条乱码，就是图片流了

最终经过处理后转换成了二维码

方法：

其实方法很简单，流程整理一下，就是window自带了一个转换的方法叫window.URL.createObjectURL()
，但是光用这个还不行，还要把你的请求加上responseType:"blob"这个是设置请求返回类型的

html

<img :src="imgbase" alt="下载二维码" style="width: 300px" />

data

imgbase:''

methods

    download_erweima(row) {
    
    
      this.$axios.get("/archVideo/video/getQRCode",{
    
    
        downLoadAddress:row.picturePath,
      },"blob").then(res=>{
    
    
        const captchaImg = window.URL.createObjectURL(res)
        this.imgbase=captchaImg
      })
    },

注意点

把返回的数据用window.URL.createObjectURL(res)转换，同时需要加上responseType:"blob"改变返回的类型才能转换成功。

这里就有一个问题，有的朋友封装的时候没有写这个responseType，所以你添加不上去，直接添加的话会影响其他的请求。所以可以在封装上添加一个responseType参数，然后赋值。这样你发请求的时候不给第三个参数就代表没有，给了就是有responseType的请求。

    get(url,params,responseType){
    
    
        const config = {
    
    
            method: 'get',
            url:url,
            responseType: responseType
        }
        if(params) config.params = params
        return service(config)
    },