vue下载二进制流图片操作

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

2、红色为必须

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

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

赞 (0)

相关推荐

  • 使用Vue实现图片上传的三种方式

    项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element-ui,封装组件为例子聊聊如何实现这个功能.其他框架或者不用框架实现的思路都差不多,本文主要聊聊实现思路. 1.云储存 常见的 七牛云,OSS(阿里云)等,这些云平

  • vue将文件/图片批量打包下载zip的教程

    vue将文件/图片批量打包下载 各种格式都可以,只要url能够打开或者下载文件即可. 1.通过文件的url,使用js的XMLHttpRequest获取blob 2.将blob压缩为zip 由于异步并行加载文件,速度还是蛮快的,我141个4M多的图片,1分左右加载完成,49个4M的图片4秒 添加依赖 //npm install jszip //npm install file-saver 在页面的script中引入依赖 import JSZip from 'jszip' import FileSa

  • vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）

    说在前面 网上有很多种文件上传的方法,根据公司最近的业务需求,要求实现多种文件的上传,在实现过程中,查阅了很多资料,最后,终于把功能实现了,开心! <template> <div> <v-header :left-text="`上传${columnName}`"></v-header> <div class="upload"> <div v-if="columnName === '视频'&q

  • vue下载二进制流图片操作

    1.应项目要求,后台返回二进制流,而且乱码 2.红色为必须 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((dat

  • Vue拿到二进制流图片如何转为正常图片并显示

    目录 二进制流图片转为正常图片并显示 解析blob 二进制流图片的展示 二进制流图片转为正常图片并显示 第一步 axios({         method: 'get',         url,         responseType: 'arraybuffer' // 最为关键       })         .then(function (response) {           that.src = 'data:image/jpeg;base64,' + that.arrayBu

  • 解决vue下载后台传过来的乱码流的问题

    解决vue下载后台传过来的乱码流的问题

    后台返回的乱码流 解决办法: 请求方式用的是axios,主要加关键的 {responseType: 'blob'} axios封装 export function postDownload(url, data) { return new Promise((resolve, reject) => { instance.post(url,data,{responseType: 'blob'}).then(response => { resolve(response); }, err => {

  • vue下载excel文件的四种方法实例

    目录 1.通过url下载 2.通过 a 标签 download 属性结合 blob 构造函数下载 3.通过 js-file-download 插件 4.使用fetch下载 总结 1.通过url下载 即后端提供文件的地址,直接使用浏览器去下载 通过window.location.href = 文件路径下载 window.location.href = `${location.origin}/operation/ruleImport/template` 通过 window.open(url, '_b

  • vue下载文件以及文件重命名方式

    vue下载文件以及文件重命名方式

    目录 vue下载文件及文件重命名 vue项目如何改名 vue下载文件及文件重命名 http Content-type对照表大家自行百度 /** * 下载文件以及文件重命名 * @param item 文件在数据库中存储信息 * @param that this别名 */ export function downFile(item, that) { // xxx是后台接口, yyy是后台需要的数据 // {responseType: 'blob'}必须添加,否则下载的文件会出现乱码 that.$a

  • C#实现的基于二进制读写文件操作示例

    本文实例讲述了C#实现的基于二进制读写文件操作.分享给大家供大家参考,具体如下: using System; using System.IO; class MyStream { private const string FILE_NAME = "Test.data"; public static void Main(String[] args) { // Create the new, empty data file. if (File.Exists(FILE_NAME)) { Con

  • vue实现百度下拉列表交互操作示例

    vue实现百度下拉列表交互操作示例

    本文实例讲述了vue实现百度下拉列表交互操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue百度下拉列表</title> <style> .gray{ background: #ccc; } </style> &l

  • vue下载excel的实现代码后台用post方法

    后台方法的参数必须是@RequestBody修饰的. 前台关键代码: axios ( { method : 'post', url : api.exportPlayTime , // 请求地址 data : { choose : type, begindate : startDate, enddate : endDate }, responseType : 'arraybuffer', observe: 'response', } ) .then ( ( res ) => { const fil

  • vue实现的双向数据绑定操作示例

    vue实现的双向数据绑定操作示例

    本文实例讲述了vue实现的双向数据绑定操作.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>经典的双向数据绑定</title> <script src="https://cdn.bootcss.com/vue/2.0.1/vue.min.js"></script> &

  • 详解vue的数据劫持以及操作数组的坑

    TL;DR 给data添加新属性的时候vm.$set(vm.info,'newKey','newValue') data上面属性值是数组的时候,需要用数组的方法操作数组,而不能通过index或者length属性去操作数组,因为监听不到属性操作的动作. 安装和初使用vue vue是构建用户界面的渐进式框架.所谓的渐进式:vue + components + vue-router + vuex + vue-cli可以根据需要选择相应的功能. 来串命令mkdir vue-apply;cd vue-ap

随机推荐