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实现兼容IE6与IE7的DIV高度
May 13 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
使用js 设置url参数
Jul 08 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 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
编写自己的php扩展函数
2006/10/09 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
Jquery遍历节点的方法小集
2014/01/22 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
python中OrderedDict的使用方法详解
2017/05/05 Python
Python实现自动发送邮件功能
2021/03/02 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
python可以用哪些数据库
2020/06/22 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
美德少年事迹材料
2014/01/23 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
小学生操行评语
2014/04/22 职场文书
会计学自荐信
2014/06/03 职场文书
新教师岗前培训方案
2014/06/05 职场文书
争先创优活动总结
2014/08/27 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
2014年导购员工作总结
2014/11/18 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB
MySQL慢查询优化解决问题
2022/03/17 MySQL
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技