vue如何获取图片流数据并展示

 更新时间:2023年09月26日 10:55:35   作者:程序员的脱发之路  
这篇文章主要介绍了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

createObjectURL返回一个DOMString包含一个唯一的blob链接(该链接协议为以blob:,后跟唯一标识浏览器中的对象的掩码)。

2.封装blob数据

3.将url的值赋给img标签的src属性

四、最终结果

五、另一种方式(FileReader)

我们使用FileReader API也可以实现,不过我们是将file类型转换为base64编码,这样img标签就可以之间展示。

1.FileReader

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

详细可见MDN的:FileReader

所以当后端传递一个file类型或者前端用户上传一个文件时,我们可以使用FileReader来进行处理

2.具体实现

        let reader = new FileReader(); // 创建FileReader()实例
        reader.onload = function (evt) { // 当文件读取完成时会执行onload事件
            //替换img标签的url
            $("#showImg1").attr("src", evt.target.result);
            console.log(evt.target.result); // evt.target.result就是图片文件的base64编码
        }
        reader.readAsDataURL(imgFile); // 读取imgFile文件

3.简单介绍

简单记录一下FileRender的具体事件以及方法:

(1)事件

  • FileReader.onabort :处理abort (en-US)事件。该事件在读取操作被中断时触发。
  • FileReader.onerror :处理error (en-US)事件。该事件在读取操作发生错误时触发。
  • FileReader.onload :处理load (en-US)事件。该事件在读取操作完成时触发。

(2)方法

  • FileReader.abort() :中止读取操作。在返回时,readyState属性为DONE。
  • FileReader.readAsArrayBuffer() :开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.
  • FileReader.readAsBinaryString() :开始读取指定的Blob中的内容。一旦完成,result属性中将包含所读取文件的原始二进制数据。
  • FileReader.readAsDataURL() :开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
  • FileReader.readAsText() :开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个字符串以表示所读取的文件内容。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • configureWebpack、chainWebpack配置vue.config.js方式

    configureWebpack、chainWebpack配置vue.config.js方式

    这篇文章主要介绍了configureWebpack、chainWebpack配置vue.config.js方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Vue + Elementui实现多标签页共存的方法

    Vue + Elementui实现多标签页共存的方法

    这篇文章主要介绍了Vue + Elementui实现多标签页共存的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • vue3+vite+vant4手机端项目实战记录

    vue3+vite+vant4手机端项目实战记录

    这篇文章主要给大家介绍了关于vue3+vite+vant4手机端项目实战的相关资料,Vue3是一种前端开发框架,它的目标是提供更好的性能和开发体验,需要的朋友可以参考下
    2023-08-08
  • 详解vuex中mutation/action的传参方式

    详解vuex中mutation/action的传参方式

    这篇文章主要介绍了详解vuex中mutation/action的传参方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 详解vue页面状态持久化详解

    详解vue页面状态持久化详解

    这篇文章主要为大家介绍了vue页面状态持久化,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • vue-cli3.0按需引入element-ui组件方式

    vue-cli3.0按需引入element-ui组件方式

    这篇文章主要介绍了vue-cli3.0按需引入element-ui组件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue+element的表格实现批量删除功能示例代码

    vue+element的表格实现批量删除功能示例代码

    这篇文章主要介绍了vue+element的表格实现批量删除功能示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • python虚拟环境 virtualenv的简单使用

    python虚拟环境 virtualenv的简单使用

    virtualenv是一个创建隔绝的Python环境的工具。这篇文章主要介绍了python虚拟环境 virtualenv的简单使用,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • vue-router钩子函数实现路由守卫

    vue-router钩子函数实现路由守卫

    这篇文章主要介绍了vue-router钩子函数实现路由守卫,对vue感兴趣的同学,可以参考下
    2021-04-04
  • 在Vue组件中使用 TypeScript的方法

    在Vue组件中使用 TypeScript的方法

    typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马就能知道这个函数的用法。这篇文章主要介绍了在Vue组件中使用 TypeScript的方法,需要的朋友可以参考下
    2018-02-02

最新评论