vue下载二进制流图片操作


Posted in Javascript onOctober 26, 2020

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

vue下载二进制流图片操作

2、红色为必须

vue下载二进制流图片操作

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二进制流。如下:

vue下载二进制流图片操作

在项目中我使用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下载二进制流图片操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现幻灯片播放图片示例代码
Nov 07 Javascript
Javascript 按位与赋值运算符 (&=)使用介绍
Feb 04 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
webpack 动态批量加载文件的实现方法
Mar 19 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 Javascript
JavaScript实现两个数组的交集
Mar 25 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 Javascript
JavaScript如何操作css
Oct 24 #Javascript
javascript实现多边形碰撞检测
Oct 24 #Javascript
解决vue scoped html样式无效的问题
Oct 24 #Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 #Javascript
Ant Design的Table组件去除
Oct 24 #Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 #Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 #Javascript
You might like
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
解决laravel session失效的问题
2019/10/14 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python3中函数参数的四种简单用法
2018/07/09 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
事业单位鉴定材料
2014/05/25 职场文书
合伙经营协议书范本
2014/09/13 职场文书
工作所在部门证明
2014/09/21 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python
Java 超详细讲解hashCode方法
2022/04/07 Java/Android