后台返回图片流，前端预览图片，解决方案

最新推荐文章于 2025-06-19 11:49:59 发布
原创 最新推荐文章于 2025-06-19 11:49:59 发布 · 5.2k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何将Blob对象转换为Base64编码字符串及URL，适用于图片数据的处理，如将请求得到的二进制数据转换为可直接显示在网页上的格式。

在这里插入图片描述

  1. blob转base64
'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))

注意：请求数据类型，responseType需要指定为arrayBuffer

  1. blob转url
URL.createObjectURL(blob)

注意：只能用于img标签

后端返回流，前端vue展示各种类型文件（word\pdf\图片）
weixin_43120613的博客
08-22 5575
这周有个需求做个文档平台，出于安全与性能考虑，我选择将文件前后端已流的形式交互，而不是直接访问地址。 技术栈：springboot 2.0 + vue 用到的开源技术有：pdf.js(展示pdf) 、 editor-ui（在线展示、编辑word） 具体用法有很多帖子，可以去参考一下，作者们的git上也写的很详细了，我就不抢人家功劳了。 这里我贴一个比较深的坑： getObjectURL(file) { let url = null; if (window.c
微前端架构：大型应用的解决方案
最新发布
wenyang12的博客
08-26 747
随着Web应用规模的不断扩大，传统的单体前端架构面临着越来越多的挑战：代码库过于庞大、团队协作困难、构建时间长、部署风险高等。为了解决这些问题，微前端架构应运而生。微前端架构借鉴了微服务的思想，将一个大型前端应用拆分为多个独立开发、独立部署的小型前端应用，从而提高开发效率和系统稳定性。本文将详细介绍微前端架构的概念、优势、实现方案以及实际应用案例。
后端返回图片流前端展示图片
活宝小娜的博客
12-01 2638
根据后端返回的图片流格式，选用合适方法转换。下面以base64为例。
后端如何返回一个（图片）文件流，并在前端vue展示。
qq_43952288的博客
03-23 1万+
以表示你将以blob形式接收（必须添加）。1，获取文件参数（非必须，根据自己情况添加）2，拿到接口返回值后，将其转为blob形式。1，首先在你的axios接口上添加。标签的src上，就可展示此图片了。将这个src变量赋值到。
后端把图片返回给前端
胡萝北的博客
11-03 1万+
方式1：返回base64格式 import org.apache.commons.codec.binary.Base64 @RequestMapping("/get-face-picture") public String getUserFacePicture(HttpServletRequest request, @RequestBody JSONObject obj, HttpServletResponse response) { String sessionId = re
vue中处理后台返回的图片流，并将图片流显示在前端
热门推荐
qq_41948525的博客
04-01 2万+
现在我接手的项目中相关的技术：vue,element-ui,axios ——————接下来看看业务场景—————— 1.看下图（这是图片流，如果直接在img标签下的src中是没有用的）那怎么办呢，别慌往下看 2.解决方法 （1).在请求后端接口返回response const src = window.URL.createObjectURL(response)//这里也是关键,调用window的...
前端在线预览pdf、png、jpg文件流
NJR10byh的博客
04-30 3237
前端通过 arraybuffer 向后端请求文件内容，文件名信息会放在 res.headers["content-disposition"] 里 如果浏览器支持 window.navigator 则通过以下方式在线预览： const data = res.data; const tempName = decodeURI(res.headers["content-disposition"].split("fileName=")[1]); if (window.navigator && wi
Java实现图片上传预览功能的兼容性解决方案
- `remote`模式：通过后台处理返回图片数据。 #### 显示预览 程序根据`MODE`属性设置不同的显示预览程序。除了`filter`模式外，通常使用`_simpleShow`方法显示预览。该方法中会使用预载图片对象来获取图片的原始...
图片上传预览技术：浏览器兼容性解决方案
用户上传的图片在服务器端处理后，生成的预览图可以通过AJAX技术返回给客户端显示。 针对上述各种情况，开发了三个不同版本的图片预览上传程序：ImagePreview_jsp、ImagePreview_asp和ImagePreview。这些程序分别...
前端PDF转图片解决方案：探索pdf.js工具应用
传统的处理方式可能依赖于第三方插件，如Flash或者ActiveX控件，但这些解决方案存在跨浏览器兼容性差、安全性低等问题。`pdf.js`作为一款开源的、纯JavaScript编写的库，它在保持跨平台兼容性的同时，提供了更加安全...
后台系统响应二进制流 前端怎么将流转成图片
12-28
### 处理后端返回的二进制流并显示为图片 为了在前端正确处理来自后端系统的二进制流并将这些数据作为图片显示，可以采用多种方法来完成这一目标。以下是几种常见的方式： #### 方法一：使用 `Blob` 对象创建对象 ...
后端图片资源通过byte在前端显示
weixin_44089726的博客
01-25 2841
后端图片资源通过byte在前端显示 byte[] bytes = FileUtils.readFileToByteArray(new File(filePath)); return bytes; this.$http({ url: `服务路径`, method: 'get', params: { ‘key':'value',d } }).then(({data}) => { this.ima
后端给前端返回图片，前端如何处理
m0_51048761的博客
06-19 359
设置一个responseType:"blod",因为我封装了请求方法所以responseType要加引号，正常的axios是不需要的，想设置请求头那么设置就可以。使用URL.createObjectURL(),括号里填写图片的返回结果，就是输出后看到的那段乱码。这样我们在img的src直接等于qrCode就可以取到我们的图片啦。在前端请求接口获取图片时，如果后端的返回结果只有一张图片。此时我们需要先设置请求时候的类型。然后前端输出之后是一段乱码。下一步就是修改接收参数。
关于后端返回图片url前端无法打开问题
lzh710679620的博客
05-08 2712
由于前端访问后端接口使用的是https协议,而后端返回图片的url使用的是http（使用的文件服务器），前端不用访问该url地址，会出现如下错误。产品需要实现一个上传图片的功能，后端选择使用文件服务器保存图片，返回一个url给前端展示图片。后端使用文件流形式返回图片给前端，前提是后端需要有接口可以把图片下载下来。
后端接口返回图片，前端的处理方法
qq_57039857的博客
07-23 913
出现问题的原因的axios默认返回的是json文本形式，二进制图片数据被强制转换成了 json 文本形式。首先，在axios中，将responseType默认返回数据类型json改为arraybuffer类型。
前端处理二进制文件流，预览图片、PDF
1234Wu--前端Blog
04-13 2万+
原生js实现预览图片、PDF 服务返回二进制流，用axios处理，指定blob类型，然后再转换成URL（ 处理后会变成blob://... 这种格式)；图片的话，作为src地址可以直接实现；预览PDF需要服务端的响应头Content-Type 为PDF类型application/pdf，不指定这种类型会直接下载，不能预览; 实例： axios指定responseType为blob类型接收响应： axios.get('url',{ params:{ key:this.key },
后台如何将图片的byte[]转成流传给前端展示
三千炼心的博客
04-19 1万+
这里用springMVC做个例子，前端请求以下方法时,直接返回一张图片 @RequestMapping("/showPhoto") public void showPhoto(String photoID, HttpServletResponse response) { OutputStream outputStream = null; try { byte[] photoByte = p...
将图片通过byte[]字节数组Base64编码后给前端显示
zzzgd_666的博客
09-05 1万+
1.base64编码显示图片 一般我们后台给前端传图片,有两种方式,一种就是通过response.getOutputStream直接将图片以流的形式写到页面显示,另一种就是先把图片上传到服务器,拿到url地址后把url地址给前端 第一种方式简单,不需要服务器,但是这种不太符合现在开发的要求,因为我们通常需要在响应的时候,加上额外的字段表示响应成功状态,以及错误信息,而直接将图片作为流写回前端的...
如何在前端显示后端返回的图片流（以Vue为例）
车联网开发的博客
09-13 1万+
我们在前端显示图片一般用法是这样的 <template> <el-carousel :interval="4000" type="card" height="310px" :autoplay="true"> <el-carousel-item v-for="item in dataList" :key="item.url" @click.native="jump(item)"> <img :src="item.dataSrc" alt="
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值