如何在前端显示后端返回的图片流（以Vue为例）

我们在前端显示图片一般用法是这样的

<template><el-carousel :interval="4000" type="card" height="310px" :autoplay="true"><el-carousel-item v-for="item in dataList" :key="item.url" @click.native="jump(item)"><img :src="item.dataSrc" alt="暂无图片" style="cursor: pointer"><div class="tip">提供文件调查功能</div></el-carousel-item></el-carousel>
</template>

如果是一般的地址，是没有问题的，但是如果后台返回的是个流的话，上面的写法就gg了。

如果流的话，我们需要如下设置将后端返回的流用window.URL.createObjectURL（）处理一下。

async init() {try {const { data } = await _getOnlineCarouselList()data.forEach(async(item) => {const fileId = item.fileId// 返回的是图片流const result = await _getOnlineCarouselPicture({ fileId })this.$set(item, 'dataSrc', window.URL.createObjectURL(result))})this.carousel = dataconsole.log(this.carousel)} catch (error) {console.log(error)}}

在访问后台调用接口的时候添加 responseType: 'blob'属性

export const _getOnlineCarouselPicture = (params) => {return request.get(`/common/file/showImg?` + new Date().getTime(), {params,responseType: 'blob'})
}

如何在前端显示后端返回的图片流（以Vue为例）相关推荐

前端将后端返回的带颜色的数据进行转换
前端将后端返回的带颜色的数据进行转换因为之前在调用后端接口的时候后端返给我的数据显示乱码:具体如下图所示: 然后这些数据在后台显示的是这样的的,如下图所示: 根据以上这三幅图片可以看到有些数据 ...
前端通过后端返回的url下载图片方法
前端通过后端返回的url下载图片方法: 1.a标签下载方式: <div class="code-info"><img :src="data.qrCode ...
使用Blob对象接收后台返回的图片流并展示到前端页面
使用Blob对象接收后台返回的图片流并展示到前端页面一.效果图二.主要代码一.效果图二.主要代码 export function 接口(params) {return request({url ...
前端将后端返回的数字(英文字母)，转成对应的文字进行显示
前言类似于省市区,状态,性别之类的可以枚举出来的变量,一般情况下数据库中存储的是其对应的value值,像省市区联动的话,前端界面中显示的是省市区的名字,但是接口的入参一般是对应的code码:如果界面 ...
【图片流转成图片】vue处理后端传来的图片流信息并转换成图片显示在前端页面上【详细解释】
前言:今天遇到的后端传一个二维码图片给我,然后给我的是图片流的形式,看起来跟一堆乱码一样,根本用不了,必须要处理转换后才能使用,然后我看了网上帖子有的说的不是很明白,可能新人看不懂,我就也写一个详细解 ...
uniapp做H5项目渲染后端接口返回的图片流
这篇文章适用于uniapp做的H5项目,不适用于小程序. 今天接到个需求,是登录页面获取验证码,调后端接口之后得到的是一个图片流信息,要渲染到前端. 如图可以看到返回的是一张图片,我们控制台打印res ...
前端处理后端返回的excel文件流并下载
项目中遇到上传excel,后端写的接口是当重复上传相同信息的excel时会吐出excel二进制文件流,这种文件流需要前端下载供用户看. 首先后端的接口需要上传文件已formData形式上传这里我用的 ...
前端将后端返回的文件流转为excel并下载
也算是自己的一个总结吧在遇到后端给前端返回的一个文件流的注意事项首先自己封装了一个方法放在了utils里面 export function exportFile(data, type, fil ...
【vue】前端根据后端返回的code码查字典表展示文本
有时候请求回来的数据列表只有字典表的对应编码,需要前端从字典表找到对应的文本并展示如果不想写一大堆循环或者if的话可以用以下的方法来写下边为模拟的数据 //模拟的数据 let list = [{t ...

如何在前端显示后端返回的图片流（以Vue为例）

如何在前端显示后端返回的图片流（以Vue为例）相关推荐

最新文章

热门文章