vue项目，把图片文件流转为base64格式以图片形式展示在前端

问题描述

前台需要展示图片，期望后台直接返回图片地址，但是后台给的是的文件流而不是一个图片地址，需要把文件流转为base64的格式展示出来。

请求后台接口时，返回图片内容如下：

上图不是base64格式，是一个文件流数据，前端要想展示，只需要转换数据格式为base64即可。

解决方法

在获取图片接口中需要添加responseType:"arraybuffer"

  getVerifyCode({tel = '',}) { // 获取图形验证码return request({url: 'test/xxx/xxx',method: 'post',data: Object.assign({username: tel}, commonquery()),responseType: 'arraybuffer'})},

设置了 responseType: 'arraybuffer’后的接口返回：

在需要的展示图片的位置添加一个img标签

 <img:src="verifyImg"@click="getVerify"/>

base64转换显示
对src绑定的verifyImg变量进行赋值处理

 getVerify() {inviteApi["getVerifyCode"]({tel: this.tel}).then(res => {const src ="data:image/png;base64," +btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte),""));this.verifyImg = src;}).catch(error => {console.log(error);});},

最终展示在前端页面的图片如下图所示

参考：前端把图片文件流转为base64格式展示在前端，显示图片

vue项目，把图片文件流转为base64格式以图片形式展示在前端相关推荐

图片文件,图片文件流和BASE64加密字符串之间的转换,以及图片的BASE64加密字符串再jsp上如何显示
*本事例主要讲了如下几点: * 1:将图片转换为BASE64加密字符串. * 2:将图片流转换为BASE64加密字符串. * 3:将BASE64加密字符串转换为图片. * 4:在jsp文件中以引 ...
vue 后台返回的文件流进行预览_基于 Vue3+Ts 后台前端管理系统Vue3-Admin
今天再给大家分享一款超不错的Vue中后台管理系统Vue3Admin. vue3-admin 基于VueCli4+Ts+ElementUI构建的后台系统.采用组件化开发模式及Flex布局,支持移动端适配 ...
php+打开图片二进制文件,php图片文件、二进制流、base64格式相互转化
1,php 图片文件.二进制流.base64格式相互转化$image = 'E:/www/logo.png'; //图片文件地址 $type = getimagesize($image)['mime ...
vue获取后台的文件流并且转换成图片
vue获取后台的文件流并且转换成图片 1.添加request的responseType export function addCode(Equip,data) { return request({ m ...
为什么要将图片转为base64格式
图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址; 1. 提升性能: 网页上的每一个图片,都是需要消耗一个 http 请求下载而来的, 图片的下载始终都要向服 ...
快速解决Vue项目打包后文件过大问题
快速解决Vue项目打包后文件过大问题为什么打包后文件过大? 如何快速解决一.路由懒加载[使用es6提案的import()方式] 二.CDN引入为什么打包后文件过大? 移动app项目,使用vue- ...
CV：基于face库利用cv2调用摄像头(或视频)根据人脸图片实现找人(先指定要识别已知人脸的文件夹转为numpy_array+输入新图片遍历已有numpy_array)
CV:基于face库利用cv2调用摄像头(或视频)根据人脸图片实现找人(先指定要识别已知人脸的文件夹转为numpy_array+输入新图片遍历已有numpy_array) 目录输出结果设计思路核 ...
vue项目dist编译文件部署到服务器：页面空白、F5刷新报错404、403报错、等等bug - 总结篇
文章目录问题一. vue编译打包dist文件之后部署到线上服务器 ,访问页面却是空白? 问题二.如果不是空白,页面F5之后就又变成空白? 以Nginx服务器为例,(如下图FTP所示) `404报错: ...
.NET中将图片文件流转成Base64字符串的实现
不太好意思啊,这篇随笔有点短,因工作上需要用WCF调用有一个别的语言开发的服务接口!而涉及到图片传输的部分只让传Base64字符串. 所以下面简短的代码即可用于将客户浏览器上传过来的图片文件转换成Ba ...

vue项目，把图片文件流转为base64格式以图片形式展示在前端

问题描述

解决方法

vue项目，把图片文件流转为base64格式以图片形式展示在前端相关推荐

最新文章

热门文章