【vue】后端接口返回了在预览中展示的png（二进制流）如何展示在前端页面？

最新推荐文章于 2024-07-10 02:47:11 发布
最新推荐文章于 2024-07-10 02:47:11 发布
阅读量6.1k 收藏 26
点赞数 9
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38990605/article/details/123280502
版权
本文介绍了如何处理后端接口返回的PNG图片二进制流并在Vue前端页面进行展示，包括在接口响应中设置blob类型以及前端如何转换和显示图片。
摘要由CSDN通过智能技术生成

调用后端接口发现返回的数据是个png图片，在预览中可以查看：
在这里插入图片描述
但是无法打印，打印得到的response出来是一堆乱码，如下图所示：
在这里插入图片描述

那你就是得到了一个二进制流的图片，你需要转换！
1、接口页：需要加上blob类型说明responseType: 'blob'

export function getHistoryImage(id) {
   
  return request({
   
    url
最低0.47元/天 解锁文章
栀妹儿
关注
  • 9
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
vue 后台返回的文件流进行预览_vue实现下载文件流完整前后端代码
weixin_35943736的博客
12-30 3209
使用Vue时，我们前端如何处理后端返回的文件流首先后端返回流，这里我把流的动作拿出来了，我很多地方要用/*** 下载单个文件** @param docId*/@GetMapping("/download/{docId}")public void download(@PathVariable("docId") String docId,HttpServletResponse response) {o...
vue中后端做Excel导出功能返回数据流前端的处理操作
10-14
在Vue项目中，当后端实现Excel导出功能并返回数据流时，前端需要进行相应的处理以将数据转化为可下载的Excel文件。本篇将详细解释这个过程。 首先，后端通常会通过HTTP响应返回一个Blob对象，Blob是Binary Large ...
后端直接返回一张图片（blob流 / base64）前端如何显示
ZM_1103的博客
08-12 3178
后端直接返回一张图片（blob流 / base64）前端如何显示
有关后端返回文件流或base64文件，前端如何实现图片展示和下载
weixin_46077222的博客
04-30 1889
文件下载与图片展示
java 返回文件流给前台预览图片
最新发布
weixin_41305635的博客
07-10 280
HTTP相关视频讲解：零拷贝的原理如何实现“java 返回文件流给前台预览图片” 一、整体流程 下面是实现“java 返回文件流给前台预览图片”的整体流程： 整体流程#render_9_2682155961-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;...
vue+axios展示二进制文件流图片
01-20
1、请求方式  axios({ url: ‘请求地址’, responseType: ‘arraybuffer’, method: ‘get/post’, params: { …data } }) 2、展示方式  两种展示方式任意选择 1、const url = URL.createObjectURL(new Blob([res]))     // 这种方法需要图片服务器不要添加限制 2、const url = `[removed]${btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromC
vue中处理后台返回的图片流，并将图片流显示在前端
热门推荐
qq_41948525的博客
04-01 2万+
现在我接手的项目中相关的技术：vue,element-ui,axios ——————接下来看看业务场景—————— 1.看下图（这是图片流，如果直接在img标签下的src中是没有用的）那怎么办呢，别慌往下看 2.解决方法 （1).在请求后端接口返回response const src = window.URL.createObjectURL(response)//这里也是关键,调用window的...
VUE项目后端接口返回图片流，图片在preview里，怎么把图片显示到页面上？
11-24 5963
今天碰到一个接口，后端返的二维码是文件流，在preview里能看到，但response里啥都没有，这种情况怎么拿到这张图片呢？
后端返回图片信息是二进制流文件，前端vue如何解析
u011295864的博客
01-18 3426
背景： 使用axios请求接口，返回的打印返回的数据，浏览器控制台显示乱码，而在preview里查看却是一张图片。 这时候应该怎么处理？ 放弃axios，使用XMLHttpRequest() 代码如下： html部分： <img :src="qrCodeSrc" /> js部分： let qrCodeUrl = '' // 要请求的接口地址 let xhr = new XMLHttpRequest() xhr.open('GET'.
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
10-15
在Vue.js应用中，使用axios库来实现POST方式获取二进制流并下载文件是一个常见的需求，特别是当需要从服务器获取如Excel、PDF等特定格式的文件时。本篇文章将详细解析这一过程，并提供相关代码实例。 首先，我们来...
Vue + antd组件 实现后端返回二进制流导出Excel模版与上传Excel模版给后端
01-03
下载模版 上传更新 methods: { beforeUpload(file) { let Res = this.checkedList.map((itemm, indexx) => { this.newJointObj.forEach((item, index) => { if (item[Object.keys(item)] === itemm) { ...
vue项目，后端返回二进制文件流，前端如何实现文件在线预览
2201_75611640的博客
08-31 3071
vue项目，jave返回二进制文件流，前端处理文件预览。
vue 根据后端数据显示图片_vuejs 根据后台返回数组，渲染图片路径
weixin_39739404的博客
12-21 830
后台返回的数组为：["5", "1", "3", "2", "1",]页面要实现对应数量的黄色星星(例如：5的话，五颗黄色的星星，默认是五颗灰色的星星，此处图片就是一个示意，希望大家不要误解)：默认item里的数据：stars:[{starsUrl:"./img/net_more/star_off.png"},{starsUrl:"./img/net_more/star_off.png"},{st...
【vue显示从后端传过来的图片流】
qq_37634156的博客
02-15 8294
<img :src="codeImg" alt="" /> data()等部分省略，直接看方法 handleImg: function (index) { if (this.dataManage[index].url == null) { this.checkShowImg = true } else { this.showImg = true showImg({ path: this.dataManage[index].url, .
Vue后端返回图片,前端显示
localhost
06-12 1841
height40px;
在Vue中处理接口返回的二进制图片数据
interest_ing_的博客
03-08 1813
在现代Web开发中，前端应用经常需要从后端接口获取图片数据。有时，这些图片数据以二进制格式返回，而不是常见的Base64编码。本文将指导你如何在Vue应用中处理这类二进制图片数据，并将其正确地显示在页面上。
vue前端展示后端传来的图片链接
weixin_58148116的博客
12-20 1979
当后端的图片是以部分地址的形式传来时，直接将其使用由于缺少协议主机端口号，因此是无法展示的
vue实现将二进制流形式图片文件，显示到页面上（若依框架）
qq_44206870的博客
11-10 3031
vue实现将二进制流形式图片文件，显示到页面上
后端直接返回一个图片对象，前端如何接收并显示在图片上
qq_44906497的博客
10-26 1723
【代码】后端直接返回一个图片对象，前端如何接收并显示在图片上。
后端返回二进制文件流,前端vue实现在线预览
09-19
后端可以返回二进制文件流给前端，前端使用Vue框架可以实现在线预览这些文件。 首先，后端需要将文件以二进制流的形式返回给前端。可以使用一些常见的后端语言和框架，如Java的Spring Boot、Python的Django等。在后端，可以通过读取文件的字节数据，再将字节数据以流的形式返回给前端。 在前端，使用Vue框架可以方便地处理二进制文件流并实现在线预览。首先，前端需要获取到后端返回的文件流，在Vue的组件中通过调用后端的API接口获取文件的二进制数据。 获取到二进制数据后，可以使用FileReader对象将文件流转换成可读的文件对象。通过FileReader的readAsDataURL方法，可以将二进制数据转换成DataURL格式，这个格式可以直接在HTML的img标签中使用。 在Vue的模板中，可以使用<img>标签来展示转换后的DataURL格式的文件数据。设置这个标签的src属性为转换后的DataURL数据，就可以在页面上实时预览文件了。 需要注意的是，不同类型的文件可能需要使用不同的处理方式。例如，图片文件可以直接在<img>标签中展示，而音频文件和视频文件可能需要使用特定的播放器插件。根据不同的文件类型，选择合适的方式来实现在线预览。 总结来说，后端返回二进制文件流，前端Vue框架可以通过调用后端API接口获取文件数据，并通过FileReader将二进制数据转换成可读的文件对象，使用<img>标签或其他特定的插件进行在线预览。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值