vue乱码图片流显示图片_vue下载二进制流图片操作

1、应项目要求，后台返回二进制流，而且乱码

2、红色为必须

this.$axios.post('/fishweb/agent/downLoad',this.stringify({filename:'qrCode.jpg'}), {

responseType: 'arraybuffer' //指定返回数据的格式为blob

}).then((res) => {

var src='data:image/jpg;base64,'+ btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''));

this.srcImg = src; //图片回显

var link = document.createElement('a');

link.href = src;

link.download = "qrCode.jpg";

link.click();

})

补充知识：vue img src加载图片二进制问题记录

此地址请求 http://xx.xx.xx.xx:xxxx/xx/.../xx/downLoadDoc?docId=xxxxx&access_token=xxxxx 返回的png二进制流。如下：

在项目中我使用img src直接对图片的二进制流加载，遇到频率很高的问题是前端发起的请求被服务器多次302重定向了，然后我访问的资源存在问题。

然后果断改为通过http get请求下来png 二进制流来处理。思路是通过responseType 制定返回数据格式为blob

请求的图片地址 url = http://xxxxxx:xxxx/xxx/xxx/merchDoc/downLoadDoc

axios({

method: "get",

url,

params: xxx,

responseType:"blob"

}).then(response => {

this.picUrl = window.URL.createObjectURL(response);

});

解析blob 并展示在img src 中如下：

this.picUrl = window.URL.createObjectURL(response);

以上这篇vue下载二进制流图片操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

vue乱码图片流显示图片_vue下载二进制流图片操作相关推荐

vue根据不同权限显示图片_vue如何实现路由权限控制
前言在实际的开发过程中,我们通常会涉及到权限的问题,不同的用户进来只能看到他对应的菜单权限,页面上的菜单渲染是比较好实现的,这里就不多提,唯一比较难的就是路由的权限控制. 解决思路目前大概有两种思路可 ...
vue根据不同权限显示图片_vue多级权限组件的实现
首先实现递归checkbox的组件假定,我们要实现的权限组件效果是这样的: 要实现点击系统,下面的都全选,点击基础功能,用户管理半选,系统半选.点击新增组织,如果基础功能没有选中,则基础功能改为选中 ...
vue获取图片流数据并展示
vue获取图片流数据并展示一.问题描述二.数据获取三.数据展示 1.window.URL.createObjectURL() (1)URL (2)createObjectURL 2.封装blob ...
Three TextureLoader纹理贴图不显示图片（显示黑色）
本人初学three.js,根据Three中文文档学习,在学习过程中发现TextureLoader纹理贴图不显示图片(显示黑色),在文档中的代码如下所示: // 纹理贴图映射到一个矩形平面上 var g ...
java byte 图片浏览器直接显示_以Spring Boot的方式显示图片或下载文件到浏览器的示例代码...
以Java web的方式显示图片到浏览器以Java web的方式下载服务器文件到浏览器以Spring Boot的方式显示图片或下载文件到浏览器请求例子:http://localhost:8080/ ...
Vue v-for :src 循环显示图片
Vue v-for :src 循环显示图片 <divclass="col-xs-12 col-md-6"v-for="(row, index) in songMen ...
opengl生成图片php,（转）使用OpenGL显示图像（七）Android OpenGLES2.0——纹理贴图之显示图片...
转:http://blog.csdn.net/junzia/article/details/52842816 前面几篇博客,我们将了Android中利用OpenGL ES 2.0绘制各种形体,并在上一 ...
Three TextureLoader纹理贴图不显示图片（显示黑色）的原因分析
两种原因: 1.物体材质不对代码: // 纹理贴图映射到一个矩形平面上 var geometry = new THREE.PlaneGeometry(204, 102); //矩形平面 // Tex ...
vue中将html页面转为图片并且下载该图片
1.下载 html2canvas npm install html2canvas 2.对应页面引入该插件 import html2canvas from 'html2canvas'; 3.具体用法 ( ...
MFC--视图窗口显示图片
插入位图资源文件类型设置为"所有文件" 图片的格式需要为bmp格式若弹出这个不用管,关闭即可编辑函数 CTestView::OnDraw void CTestView::On ...

vue乱码图片流显示图片_vue下载二进制流图片操作

vue乱码图片流显示图片_vue下载二进制流图片操作相关推荐

最新文章

热门文章