【图片流转成图片】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 = paramsreturn service(config)},

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

java 后端根据传入参数生成HTML并转换成Base64图片字节码（以及FTP上传常用）
方案一将数据拼接成HTML字符串报道到指定地址,读取html转成base64Img数据 1>将字符串转成HTML并保持 String str="<!DOCTYPE html&g ...
Vue解析后端传来的带有文字和html代码的数据
产生原因最近在毕设过程中学习了Vue,遇到一种情况是在前端解析后端传来的带有文字和图片的文章.考虑了很多种方法,最后选择直接在MySQL数据库中存储文字+html代码的形式.但是写好之后发现前端直接 ...
如何在前端显示后端返回的图片流（以Vue为例）
我们在前端显示图片一般用法是这样的 <template><el-carousel :interval="4000" type="card" h ...
时间戳处理：vue中请求接口返回的数据将时间戳转换成时间并渲染到页面
问题: 今天遇到一个问题是,请求接口,返回了很多的时间戳数据.将时间戳转换成时间.并渲染到页面上.之前有篇文章讲的是单个时间戳的转换.这次是多个数据.我有点不知所措了. 分析: 经过思考,我们可以这样 ...
PPT转成html视频无法播放,绝对实用将PPT文档转换成Flash/HTML
喜欢用PPT做演示说明的用户,偶尔会遇到客户机或其它机器未安装Microsoft Office PowerPoint而无法演示的尴尬,但如果你有了iSpring这个PowerPoint插件,便会让此问 ...
ppt可以转换成HTML格式吗,极强PDF转换器如何将ppt转换成html网页格式
极强PDF转换器如何将ppt转换成html网页格式?想要转换文件其实很简单,小编告诉大家一个用专业的极强PDF转换器软件将PPT转换成HTML网页格式的方法,下面小编就来教大家如何将PPT幻灯片转换成 ...
怎么把video文件改成mp4_如何将QLV格式（腾讯视频）转换成MP4视频？
QLV格式腾讯自研的一种特殊的视频格式,这种格式的视频只能在腾讯视频客户端才能播放,其他播放器是无法播放的,也不能导入视频剪辑软件进行剪辑. 那么如何将腾讯视频的QLV格式转换成通用的MP4呢?小迅查 ...
uniApp image标签引入图片想要偏移不要用padding 会出现图重影问题最好换成margin
前端页面上换行、根据后端返回的换行符（“↵”）进行换行展示（vue、v-html）
有时候我们会遇到这样的需求:后端返回一个换行符("↵"),前端拿到后需求根据该符号进行换行展示方法一:textarea赋值当我们拿到后端返回的数据时,直接通过v-model绑定 ...