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

目录
  • 二进制流图片转为正常图片并显示
  • 解析blob 二进制流图片的展示

二进制流图片转为正常图片并显示

第一步

axios({
        method: 'get',
        url,
        responseType: 'arraybuffer' // 最为关键
      })
        .then(function (response) {
          that.src = 'data:image/jpeg;base64,' + that.arrayBufferToBase64(response.data)
        })
arrayBufferToBase64 (buffer) {
      var binary = ''
      var bytes = new Uint8Array(buffer)
      var len = bytes.byteLength
      for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i])
      }
      return window.btoa(binary)
    },
 <img :src="src" alt="验证码">

解析blob 二进制流图片的展示

<el-image v-loading="loading" style='height: 480px;' :src="imgsrc"></el-image>
// /api/plan.js文件请求方法
export function getFlowPhoto(data) {
    return request({
        url: '/xxx/xxxx/getFlowPhoto',
        method: 'post',
        responseType: 'blob',
        data
    })
}
<script>
  import {getFlowPhoto} from "@/api/plan.js";
  export default {
    data() {
      return {
        imgsrc:'',
        loading:false,
      }
    },
    mounted() {},
    methods: {
      fetchData() {
        this.loading = true;
        var that = this;
        getFlowPhoto({id:xxx}).then((res) => {
          if(res.code == 401){
            this.$message({
              message: res.message,
              type: "error",
            });
          }
          if(res){
            const myBlob = new window.Blob([res], {type: 'image/jpeg'})
            const qrUrl = window.URL.createObjectURL(myBlob)
            this.imgsrc = qrUrl;
            this.loading = false;
          }
        });
      },
    }
  }
</script>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue.js图片转Base64上传图片并预览的实现方法

    对于前端人员来说,图片处理是一个很常见的需求,由于图片稍微特殊,现在多数做法都是使用调用ajax接口通过http方法来提交,例如post方法提交,后台处理后返回一个图片路径给前端,前端根据这个路径写入img标签,但是基于当前的前后端分离的开发模式下,前后端代码往往不在同一个系统目录下,而且部署时可能liunx路径与windows路径不一样,这样后期路径更改可能会导致维护困难问题出现. 针对这种问题,这里我推荐使用图片转base64格式,再发给后端,后端只需将转码结果存入数据库即可,前端调用接口直

  • vue上传图片文件的多种实现方法

    vue上传图片文件的多种实现方法

    最开始百度到各种加headers,最后发现没什么用,有大兄弟知道的可以告知一下哦,记个随笔 原始input标签form表单上传 <input type="file" @change="onchangemd"> methods: { onchangemd(e){ console.log(e.target.files)//这个就是选中文件信息 let formdata = new FormData() Array.from(e.target.files).m

  • 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中接收二进制文件流实现pdf预览的方法

    后台Controller @RequestMapping("/getPDFStream") @ResponseBody public void getPDFStream(HttpServletRequest request,HttpServletResponse response) { try { request.setCharacterEncoding("utf-8"); } catch (UnsupportedEncodingException e) { log

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

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

  • Vue axios 将传递的json数据转为form data的例子

    修改main.js文件中axios的配置: 在发送请求前将数据用qs模块转化 修改请求头的Content-Type='application/x-www-form-urlencoded' 具体配置如下: import axios from 'axios' import qs from 'qs' // 添加请求拦截器 axios.interceptors.request.use(function (config) { if(config.method!='get'){ config.data=qs

  • vue中利用simplemde实现markdown编辑器（增加图片上传功能）

    前言 最近在搭个人博客网站,需要一个 markdown 编辑器,来进行博客的编写 看了网上的教程,决定使用 simplemde 以为可以直接能拿来用的 不过实际运用的时候发现还是有要完善的地方 比如令人头疼的图片上传 最终效果 安装及初始化 npm install simplemde --save 在html中加入一个textarea <textarea id="simplemde"></textarea> 在vue的生命周期函数 mounted 中,添加 si

  • PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例

    PyQt5安装 在cmd下输入pip install PyQt5 完成PyQt5安装, 安装完成后,在python安装目录下可以看到 配置PyCharm 配置PyCharm是为了在Pycharm里面实现打开qt designer,然后生成qt文件,然后将qt文件转换成python语言的软件文件. 打开Pycharm,按下图操作 打开Extrernal Tools之后,点击上如绿色的+,添加Tools Name:自定义 Program:指向上述安装PyQt5-tools里面的designer.ex

  • Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

    Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

    本文为大家分享了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义,供大家参考,具体内容如下 1.安装 npm install vue-quill-editor --save 2.在main.js中引入 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quil

  • vue css 引入asstes中的图片无法显示的四种解决方法

    这里主要针对的是vuecli2中的一些问题. vue项目中,常常会有很多的图片资源,这样的资源存放位置,通常我们有两个选择:1. static,2. assets 关于这两者之间的区别,和如何选择这里就不多说了! 这里我们来说说assets目录下存放图片时,在vue组件的css样式中引入图片时将会遇到的一些问题! 正常情况,我们在本地开发调试的时候,无论什么样的方式引入图片都不会有问题.但是,一大包发布打线上,就会出现图片无法加载的情况! 这是因为,出于某些原因,有人修改了config目录下的i

  • vue页面图片不显示问题解决方案

    vue页面图片不显示问题解决方案

    在做新版组态界面的时候,用vue框架实现,在配置页面图片的时候发现有一张图片明明页面输入的路径是对的可是图片就是不显示出来 现象: network页面资源也不报错,而且状态码竟然还是200,点preview里面又什么都没有,后面一输入,发现随便输入什么字都是出现的200 解决办法: 在webpack里面配置静态资源的路径 1.找到vue.config.js 2.在module.exports下面的devServer里面添加一个键 contentBase:path.join(_dirname,'s

  • Vue+UpLoad实现上传预览和删除图片的实践

    Vue+UpLoad实现上传预览和删除图片的实践

    1.用vue+Element完成一个图片上传.点图预览.加删除功能,如图: 2.首先我们再组件中引入这一段代码,每个属性的使用也都放在这里了: <el-upload class="upload-demo" action=""//引号里面填要上传的图片地址,用接口的话是公共的接口地址拼接一个图片的接口 :on-preview="handlePreview"//图片已经上传完成时点击触发(钩子函数) :on-remove="handl

  • 在vue中v-for循环遍历图片不显示错误的解决方案

    在vue中v-for循环遍历图片不显示错误的解决方案

    目录 v-for循环遍历图片不显示错误 错误 vue本地图片路径正确,但for循环不显示 经过改正加个require()就可以显示了 v-for循环遍历图片不显示错误 <template> <div class="demo" :style="{width:innerWidth} + 'px' "> <div class="carousel-inner"> <div v-for="(img,i)

随机推荐