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 相关文章推荐
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
Vue3为什么这么快
Sep 23 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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
php miniBB中文乱码问题解决方法
2008/11/25 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
python实现在控制台输入密码不显示的方法
2015/07/02 Python
Python实现简单的代理服务器
2015/07/25 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
IRO美国官网:法国服装品牌
2018/03/06 全球购物
党支部综合考察材料
2014/05/19 职场文书
销售人员工作自我评价
2014/09/21 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
计划生育个人总结
2015/03/02 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书