专栏首页西安-晁州接口返回图片二进制流前端展示

接口返回图片二进制流前端展示

接口返回图片二进制流前端展示

问题描述

请求后台接口时,返回图片内容如下:

咋一看,不是base64格式,二十二进制的图片流数据,前端要想展示,只需要转换数据格式为base64即可。

解决方案

设置responseType为arraybuffer

设置了arraybuffer后的接口返回:

base64转换显示

this.processImgSrc = 'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:http://www.cnblogs.com/vipzhou复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 返回给前端图片流

    在开发时遇到造一个这样的问题,场景是这样的,前端需要一个接口,根据用户的id返回用户的图片流,当时没明白什么是流,后来通过查看nodejs的文档,nodejs具...

    挥刀北上
  • springMVC 返回流图片显示,前端接受流

    直接访问springmvc路径 直接访问通过流的形式返回图片,但是这个有一个缺陷就是 返回的title是路径名称加像素。

    斯文的程序
  • 3 分钟用 Go 写完验证码,面试官现场发 Offer

    比如:最常见的注册、登录业务,如果你不上一些验证手段,可能人家就可以随便找一个工具,直接对你注册接口疯狂输出,让你分分钟拥有十几万神秘用户。

    小锟哥哥
  • 怀疑前端组件把我的excel文件搞坏了,怎么证明

    我在做个需求,用户通过excel上传文件,文件中,每一行就是一条数据,后台批量处理;但是呢,用户填的数据可能有问题,所以我后台想先做个检查,然后在每一行中加一列...

    曹工
  • .Net之Layui多图片上传

      多图上传在一些特殊的需求中我们经常会遇到,其实多图上传的原理大家都有各自的见解。对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的...

    追逐时光者
  • Angular企业级开发(9)-前后端分离之后添加验证码

    1.背景介绍 团队开发的项目,前端基于Bootstrap+AngularJS,后端Spring MVC以RESTful接口给前端调用。开发和部署都是前后端分离。...

    八哥
  • SpringMVC返回图片的几种方式

    SpringMVC返回图片的几种方式 后端提供服务,通常返回的json串,但是某些场景下可能需要直接返回二进制流,如一个图片编辑接口,希望直接将图片流返回给前...

    一灰灰blog
  • SpringMVC返回图片的几种方式

    主要借助的是 HttpServletResponse这个对象,实现case如下

    一灰灰blog
  • 文件上传杂谈

    文件上传是前端很常见的一类场景。图片、视频和文档等等都属于文件范畴,每个文件则是通过 File.Type 进行更细的划分。本文将针对文件上传的一些通用维度场景做...

    有赞coder
  • 利用 Blob 处理 node 层返回的二进制文件流字符串并下载文件

    看到标题有点懵逼,哈哈,实际上是后端将文件处理成二进制流,返回到前端,前端处理这个二进制字符串,输出文件或下载

    Krry
  • 第七十八期:关于buffer的思考

    前端需要处理buffer的情况不多,可以说很少见。但是理解这个概念对我们来说并没有什么坏处。还是那句话,我并不善于去写各种API的具体的使用方法,更多的是去描述...

    terrence386
  • AI人脸应用

    这款颜值检测小程序使用了腾讯开放人脸识别API,本项目适合刚入门的同学练手,熟悉整个框架,整体实现如下:

    用户2745393
  • SpringMVC文件上传下载

    文件上传和下载是互联网web应用非常重要的组成部分,它是信息交互传输的重要渠道之一。你可能经常在网页上传下载文件,你可能也曾沉浸于互联网技术的神秘,而本篇就为你...

    bigsai
  • Flutter上传、显示二进制图像的一些事

    前端图像的展示,我们最常用的是给定一个图像地址,然后它就会自己加载并显示,如这样的代码:

    IT晴天
  • 微信小程序----获取二维码

    3. 返回的结果二维码(扫码即可进入Rattenking 的博客测试商店)

    Rattenking
  • 关于 Blob

    对于 Blob,前端开发中可能比较少遇到;数据库中可使用 Blob 概念,例如 Mysql 存储二进制数据的类型就是 Blob,也就是说图片可存储于数据库中,以...

    Krry
  • .NET Core Web API使用HttpClient提交文件的二进制流(multipart/form-data内容类型)

       在需要通过服务端请求传递文件二进制文件流数据到相关的服务端保存时,如对接第三方接口很多情况下都会提供一个上传文件的接口,但是当你直接通过前端Ajax的方式...

    追逐时光者

扫码关注腾讯云开发者

领取腾讯云代金券