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代码
Aug 13 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 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
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
python的常见命令注入威胁
2013/02/18 Python
Python装饰器decorator用法实例
2014/11/10 Python
python中函数传参详解
2016/07/03 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
学生打架检讨书1000字
2014/01/16 职场文书
机械系毕业生求职信
2014/05/28 职场文书
幼师求职自荐信
2014/05/31 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
课外活动实习计划
2015/01/19 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
pytorch中的 .view()函数的用法介绍
2022/03/17 Python
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers