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 相关文章推荐
JavaScript的面向对象(一)
Nov 09 Javascript
JavaScript 捕获窗口关闭事件
Jul 26 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
php 邮件发送问题解决
2014/03/22 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
获取Javscript执行函数名称的方法
2006/12/22 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
Python面向对象特殊成员
2017/04/24 Python
python opencv之SIFT算法示例
2018/02/24 Python
python程序封装为win32服务的方法
2021/03/07 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
python实现小世界网络生成
2019/11/21 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
python能在浏览器能运行吗
2020/06/17 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
课堂教学改革实施方案
2014/03/17 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
感恩节活动策划方案
2014/05/16 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
学习三严三实心得体会
2014/10/13 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
浅谈Python数学建模之整数规划
2021/06/23 Python