图片二进制流 - 2018-06-08

• 2018-06-08创建

axios(ajax)请求指定返回数据类型

{ responseType： 'blob' }

export function getImgSrc(url, extra){
  return axios.get(url, { params:  extra, responseType: 'blob' });
}

image.png

处理 blob 对象，生成 img 标签 src 链接

getImgSrc(url,{
           abc: '123'
          }).then(res => {
            var blob = new Blob();
            blob = res;
            this.$emit('changeimg', window.URL.createObjectURL(blob));
          })

<img width="100%" :src="dialogImageUrl" alt="">

其他

工作中碰到的问题，在处理接口返回的验证码图片时，由于返回的是encode编码代码，在js端获取到数据之后，通过函数encodeURI()来进行解码，之后可以通过在src中设置来实现图片显示：

<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAoCAIAAAC6iKlyAAAFL0lEQVR42u3Zb2hXVRgH8EsbGoNe%0D%0ABJWmKeGcL1TajKGbmlGjjAWDRstQ7IWoc%2BALw6SgF669iWqRYKUuCWJtGDrDSCgkN6SUEnHG1PbC%0D%0AgVgJib5okkZ%2F7IEnHp7Ouee5zzn33LsJHb778dv9nXt%2Fd5%2Ffw3PP%2FS25dduO6rH%2Bp4%2F9UeY7ftva%0D%0AjAnYN4Gfrp0vQm5H65Kh84gn9Ay5MSvrL1AmrfLiXRsAGh6NNOzrN7ZMyOl98MwUCD7%2F%2FLXLSeok%0D%0AEofnHL04%2BrXDVa1nTsMjJH9Fg3Xq9g0...">

实现方法：

在src前添加data:image/jpeg;base64,+已经encode的二进制代码，就可以在网页端显示出图片.

不过这么长串的二进制字符直接展示在html里实在不是上上之选，希望有条件的话可以让后台进行转码，直接获取src地址才是相对友好的方法。