vue获取图片流数据并展示
vue获取图片流数据并展示
一、问题描述
该场景适用于所有后端传递图片流数据给前端的情形
比如说当我们在做登录验证是，我们可能需要从后端获取验证码，这是后端传递给你的可能是一个图片数据而不是验证码数字。
接口回参：
打印一下：
二、数据获取
如果我们在请求接口获取数据时不指定返回数据类型的话，我们获取到的可能就是一堆乱码数据。
因此我们在axios接口请求里面指定responseType为blob
再打印一下：
这就获得一个封装好的blob类型数据了
三、数据展示
获取到数据之后要用img标签进行展示，img标签的src需要直接指向blob数据的话是没有用的，所以我们要创建一个url来指向的的blob数据，然后将url赋给img的src属性。
1.window.URL.createObjectURL()
（1）URL
URL接口用于解析，构造，规范化和编码 URLs。 它通过提供允许您轻松阅读和修改URL组件的属性来工作。 通常，通过在调用URL的构造函数时将URL指定为字符串或提供相对URL和基本URL来创建新的URL对象。 然后，您可以轻松读取URL的已解析组成部分或对URL进行更改。
如果浏览器尚不支持URL()构造函数，则可以使用Window中的Window.URL属性。 确保检查您的任何目标浏览器是否要求对此添加前缀。
（2）createObjectURL
返回一个DOMString ，包含一个唯一的blob链接（该链接协议为以blob:，后跟唯一标识浏览器中的对象的掩码）。