关于POST接口返回图片流，前端展示图片

最新推荐文章于 2024-03-06 18:00:26 发布
最新推荐文章于 2024-03-06 18:00:26 发布
阅读量4.2k 收藏 4
点赞数 5
分类专栏： js async/await 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33989590/article/details/118566701
版权

工作当中，有时候会碰到后端由于存储方式等原因，返回给前端的图片的请求方式为POST，这个时候前端如果需要把图片显示在页面上，就要把图片流转换为图片：

post返回的图片流，在chrome的network preview时是一个正常图片，前端通过console.log打印的话就会是一串乱的编码，出现问题的原因的是前端请求默认返回的是 json 文本形式，二进制图片数据被强制转换成了 json 文本形式。我们只需要在前端请求配置，比如axios中配置responseType为blob

再然后：

    // codeFile 接口返回结果
    const blob = new Blob([codeFile])
    const url = window.URL.createObjectURL(blob)
    //在img上绑定url即可

qq_33989590
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue解析后端返回的二维码图片数据流
01-07
问题场景： 后端返回图片数据流，打印结果是乱码，如下： Chrome浏览器的preview中可以看到二维码（图片），如下： 解析思路： 尝试用二进制大对象Blob解析，然后生成图片的URL，代码如下： // QRCode 为后端接口返回的图片数据流 const blob = new Blob([QRCode]) const url = window.URL.createObjectURL(blob) 但是把生成的URL链入img的src后仍然显示不出来，在查资料后知道还需设置responseType为blob才行，代码如下： const QRCode = await this.$swag
开奖API调用.txt
09-03
总是听到前端开发人员和服务器开发人员在讨论接口的问题，而你却一脸懵逼，不知所云，有时候我们会调用第三方平台的服务，但你不知道如何根据对方的接口写文档，因为你根本不知道接口是何物！ 这篇文章写得很通俗易懂，希望你看过之后有所收获！ 开放即共享，是互联网的一个重要属性和精神。它是一种服务模式，一个特殊的产品，目前较大规模的互联网企业都有自己的开放平台。 如果把自己局限为一个功能产品经理，工作当中只是研究研究产品交互形式、操作流程、表层架构，那确定不太需要知道开放平台相关知识。但如果希望自己能够在较高一层看待产品，那么不光光要熟悉产品本身，还需要知道开放生态，清楚哪些内容可以开放出去，服务什么样的人群？能和哪些垂直领域的优质ISV（独立软件服务商，特指专门从事软件的开发、生产、销售和服务的企业）合作，打造更好的服务生态。 对接口的理解 说到开发平台就一定离不开接口，作为pm，我们不需要对接口了解的特别细。只需要知道接口是什么，有什么用，有哪些要素就行。 1、接口是什么。 生活中我们会接触很多接口，像HDMI接口，USB接口，而且我们知道接入某个接口就能实现某种功能，例如U盘插入电脑USB接口就可以相互传输文件，我们并不需要知道具体是怎么实现的，只需要接入之后能干什么就行。其实从实际意义上讲程序的接口也和硬件一样，将内部实现的功能封装起来，像一个盒子一样只留出一个口子，人们接入这个口子就能使用这个功能。 2、接口有什么用。 实际开发中，当前端和后端有数据交互时，前端开发人员都会直接向后端询问接口，而不会问他具体的实现，比如APP上需要展现目前天气，那么前端开发直接接入一个天气查询接口就行。另外接口的开放可以帮助第三方应用轻松实现更多功能，如第三方登录、第三方支付等等。 3、接口的几大要点 接口地址——请求的网址。 请求方法——一般采用的是HTTP协议的POST和GET请求。 请求参数——你传过去是什么内容。 返回内容——就是你传参数过去之后得到返回的内容，返回内容的格式一般为json或xml格式 错误代码——也是返回内容的一部分，当接口发生一些意外情况时，错误代码会告诉你原因。 举个例子，你的APP上要实现查询快递的功能，接入了一个快递查询的接口。作为用户希望的是有一个输入订单号的输入框，点击查询按钮就能够看到快递到哪了。那么输入的快递单号就是请求参数，包裹在什么时候到达哪里就是返回内容。 搭建开放平台的目的 1、为第三方开发者提供基础服务。 通过开放自身产品服务的各种API接口，让其他开发者在开发应用时根据需求直接调用，例如微信登录、微信支付，支付宝支付、滴滴打车、酒店查询预订等等。我之前呆的一家公司做的是一款商务旅行产品，其中酒店模块接的就是艺龙的接口，能够快速实现基本的查询预订功能。 这样一方面帮助开发者节省大量的时间，另一方面也能宣传自身品牌，最重要的一点就是让第三方产品更好的满足用户需求，假如你做了一个具有较强交易属性的应用，但不接入微信和支付宝支付，即使其他方面做的再好，我相信也没有多少人会使用你的产品。 2、通过平台的优势引进ISV服务商。 服务商通过入驻平台，将自己开发的产品集成到别人的产品上面，这相当于一种合作模式，两方共同合作打造一站式的服务生态，满足用户的更多需求。 阿里的钉钉里面就集成了很多第三方应用，像石墨文档、易快报销、微投票等等，大多都是跟企业应用相关的产品，企业管理的所有需求，通过一个钉钉就够。 再举个例子，饿了么开发平台通过引进ISV，服务市场将提供一站式O2O+门店餐饮服务，从人员招聘、餐饮一体管理软件、硬件设备、图片拍摄、用户营销，甚至法律咨询，满足商家开店经营的几乎所有需求，商家都可以在服务市场尽情挑选饿了么精选入驻的服务商，告别到处咨询打听的麻烦。 3、满足用户的个性化需求。 正所谓众口难调，一款再好的产品也无法满足用户的所有需求，总存在一些个性化需求。那么通过开放平台，让那些自己有开发能力或开发资源的用户在原基础的服务上进行一些改造，满足自身的特定需求。 例如我们熟悉的微信公众号，假设你做了一个电商公众号，想在里面加入商品查询、下单，订单中心、个人中心、订单进度查询等功能，那么就需要第三方平台开发。 搭建开放平台的大致流程 1、确定服务对象和范围。 在打算做开发平台之前首先要想清楚开发平台的目标用户群体是谁，能够满足他们什么需求，使用场景是怎么样的等等。例如饿了么、美团外卖，它是一个点餐平台，但不做收银。那些做餐饮管理、做收银的企业就可以通过和外卖平台合作，让商家的收银系统里集成第三方外卖功能，用户在饿了么、美团上点餐，商家可以在收银机上接受他们的消息并处理订单。商家也可以将自己的餐饮管理系统里面商品信息同步到外卖平台的店铺上面。那么这时外卖平台需要开发店铺信息保存接口、商品上传接口、订单状态等接口，来保持两边的数据能够打通。 再比如在饿了么、美团上面开店的商户们可能会在经营时存在资金短缺问题，那么就可以在开发平台上引入提供贷款服务的ISV。 2、接口设计 确定好主要的服务对象和范围之后，接下来要做的就是接口设计。接口设计不是一般PM的工作内容，再说很多做功能设计的PM也不了解这块。这需要技术人员和开发平台产品经理一起完成。 接口设计包括接口命名，传参格式、返回内容、字段命名等。好的命名能让开发者便于阅读和理解，如product.add和product.update，一看就知道商品添加和商品信息更新的接口。 3、授权和审核 授权保障用户和企业数据安全性，不被其他人非法调用。开发平台成立之后就会有开发者进行注册申请，那么我们就需要确定审批规则，申请的接口权限越高，对开发者的资质要求也就越高。 另外对于ISV服务商和商家IT入驻，还需要设计入驻流程、入驻介绍，常见问题等等，ISV入驻大概流程如下： 商务对接——成为服务商——资质审核——创建应用——开发调试——应用审核——应用上架——商务验收
前端处理接口直接返回的图片
最新发布
dbeidouxingf的博客
03-06 509
有时候接口会直接返回图片而不是连接，前端需要处理后才能使用。
welog:Meteor 101 课程的动手项目
06-09
Powered by Kevin Meteor 101 课程练习项目 本项目采用 packages 作为前端 UI. 其中包括以下 Package: See it in action here: 项目目标 这个项目不是一个 Production ready 的项目. 主要目的是让大家练习课堂中学习到的 Meteor 知识, 并真实开发一个实际项目. 这个项目使用到的 Meteor 技术包括 模板 使用 ionic 作为移动 UI 框架. 数据库 增删改查 Pub/Sub 用户登陆注册 微信 API 集成 部署 软件功能 可以运行在微信, ios, android, web 等各种运行环境 用户可以登陆, 注册, 退出 登陆的用户可以 Post 文字和图片(照相)成为博客 每个 post 有一个对应的 URL 和 ID. 其他用户可以匿名阅读 post Post 列表, 选择某一篇 Pos
vue.js图片转Base64上传图片并预览的实现方法
12-11
对于前端人员来说，图片处理是一个很常见的需求，由于图片稍微特殊，现在多数做法都是使用调用ajax接口通过http方法来提交，例如post方法提交，后台处理后返回一个图片路径给前端，前端根据这个路径写入img标签，但是基于当前的前后端分离的开发模式下，前后端代码往往不在同一个系统目录下，而且部署时可能liunx路径与windows路径不一样，这样后期路径更改可能会导致维护困难问题出现。 针对这种问题，这里我推荐使用图片转base64格式，再发给后端，后端只需将转码结果存入数据库即可，前端调用接口直接获取到base64数据直接写入img src 标签即可 下面使用element ui upload
解决vue下载后台传过来的乱码流的问题
01-22
后台返回的乱码流 解决办法： 请求方式用的是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 => { 　　　　　　reject(err) 　　　　}) 　　}) } 下载插
c# Post提交图片
05-15
c# Post提交图片
C#通过HttpClient调用Post接口并传递图片
weixin_43343835的博客
04-15 3341
实现代码如下： 另外还有一些参数可以提取，并可以将内容也提成字段或其他方式传递。 /// <summary> /// 上传图片文件 /// </summary> /// <param name="url"></param> /// <param name="filePath"></param> /// <param name="head
springboot 接口返回图片
shuaiqijiejie的博客
10-03 6817
使用springboot接口获取图片url地址，浏览器可直接访问
后端接口返回图片（数据流）前端怎么处理（ArrayBuffer转base64）【包含PC以及小程序】
feiyu的博客
11-25 1724
【代码】微信小程序接口返回图片前端处理。axios封装
【前端】ajax 接口返回图片文件流，将图片保存至自己服务器，并展示该图片
Chon.Wang
12-21 2158
ajax 接口返回图片文件流，并展示该图片
image-server:图片服务器 node + koa2 + webp
05-12
Image-server /* 上传的图片会默认转换成同名的webp格式图片文件，返回结果会按照上传格式返回，可以直接在前端请求webp格式的图片 http://127.0.0.1/photo/7891693689182.jpg 'ok' http://127.0.0.1/photo/7891693689182.webp 'ok' */ 接口说明 将图片上传至接口，成功会返回在线的图片链接提供使用 请求地址：/photo/:children1?/:children2? 请求类型：post 类型：file 说明：:'children1?/:children2?' 为可选，代表图片在photo目录下的哪个文件夹，最多2级目录 请求参数：无 响应参数: { code: 200, msg: "上传成功", data: [ 'http
后端直接返回一张图片（blob流 / base64）前端如何显示
ZM_1103的博客
08-12 2880
后端直接返回一张图片（blob流 / base64）前端如何显示
前端笔记之微信小程序（三）GET请求案例&文件上传和相册API&配置https
weixin_30699955的博客
08-07 401
一、信息流小程序-GET请求案例 1.1服务端接口开发 一定要养成接口的意识，前端单打独斗出不来任何效果，必须有接口配合，写一个带有分页、关键词查询的接口： 分页接口：http://127.0.0.1:3000/info?page=1 查询接口：http://127.0.0.1:3000/search?word=李 详情接口：http://127.0.0.1:3000/xian...
接口返回的是一个图片文件而不是url 前端如何显示？
热门推荐
盏茶作酒的博客
08-22 1万+
请求后端接口 返回的时一张图片 如何在img中显示? preview里查看就是显示一张图片 console.log(img): .] 用blob createObjectURL转换成地址后前端img还是访问不到的效果 结果 代码 this._http.doGet(this, 'createQRCode', {id: this.lessonId}, (res) => { var img = document.createElement('img') ...
后端接口返回图形验证码数据流，前端应如何渲染展示
weixin_45092437的博客
09-18 6785
我们不能直接将图片数据流展示到页面上，所以我们需要想办法让图片验证码正常的展示在页面中。此处我列举两种办法：通过img标签的src去请求接口、通过原生ajax进行数据流转换。
java-后端调用第三方接口返回图片流给前端
Mona
10-26 2089
java-返回图片流给前端
后端如何返回一个（图片）文件流，并在前端vue展示。
qq_43952288的博客
03-23 8687
以表示你将以blob形式接收（必须添加）。1，获取文件参数（非必须，根据自己情况添加）2，拿到接口返回值后，将其转为blob形式。1，首先在你的axios接口上添加。标签的src上，就可展示此图片了。将这个src变量赋值到。
后端接口返回一张图片
Luckyzhoufangbing的博客
11-25 1万+
（一）项目背景 图形验证码后端接口返回一张图片，前端需要将返回的图片放到前端页面中 （二）解决方法以及代码 axios.get(API.getImgCode, { params: params, responseType: 'blob' // 必须说明 axios 请求类型 }).then((res) => { this.setState({ imgCodeUrl...
uniapp中写接口返回图片数据
09-13
### 回答1： 可以使用 uni.request 函数发起 HTTP 请求来获取图片数据。 具体方法是在 uni.request 中设置 responseType 为 'arraybuffer'，然后将请求返回的二进制数据转换为 base64 编码并赋值给图片元素的 src 属性。 例如： ``` uni.request({ url: 'http://example.com/image.jpg', responseType: 'arraybuffer', success: (res) => { let base64 = wx.arrayBufferToBase64(res.data) let imageSrc = 'data:image/jpg;base64,' + base64 this.imageSrc = imageSrc } }) ``` 在模板中，可以使用 v-bind 指令将图片元素的 src 属性绑定到 imageSrc 变量上。 ``` <template> <view> <image v-bind:src="imageSrc"></image> </view> </template> ``` ### 回答2： 在uniapp中写接口返回图片数据，可以按照以下步骤进行操作： 首先，需要在后台服务器端编写一个接口用于返回图片数据。这个接口可以是使用任何编程语言实现的，比如PHP、Node.js等。接口的功能是获取图片的路径或者图片的二进制数据，并返回给前端应用。 1. 后台服务器端编写接口的代码如下（以Node.js为例）： ```javascript const fs = require('fs'); const path = require('path'); const express = require('express'); const app = express(); app.get('/getImage', (req, res) => { const imagePath = path.join(__dirname, 'images', 'sample.jpg'); // 图片路径 // 读取图片的二进制数据 fs.readFile(imagePath, (err, data) => { if (err) throw err; // 设置响应头，指定返回的数据类型为图片 res.setHeader('Content-Type', 'image/jpeg'); // 返回图片数据 res.send(data); }); }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 2. 运行上述代码，启动服务器。服务器将在3000端口监听请求。 3. 在uniapp中，可以使用uni.request方法发起请求获取图片数据。示例如下： ```javascript export default { methods: { getImageData() { uni.request({ url: 'http://localhost:3000/getImage', // 接口地址 method: 'GET', responseType: 'arraybuffer', // 设置返回数据的类型 success: (res) => { const base64Data = uni.arrayBufferToBase64(res.data); // 将返回的arraybuffer类型数据转为base64格式 this.imageData = `data:image/jpeg;base64,${base64Data}`; // 将base64格式数据赋值给前端展示的图片 } }); } } } ``` 4. 在uniapp页面中调用getImageData方法，发起请求并获取到图片数据后，将其赋值给前端展示的图片源，即可在前端页面中显示接口返回的图片数据。 通过以上步骤，就可以在uniapp中写接口返回图片数据，并在前端应用中展示图片。 ### 回答3： 在uniapp中，编写接口返回图片数据需要按照以下步骤进行操作： 首先，需要在后端服务器中创建一个接口来将图片数据返回给前端。可以使用Node.js、PHP、Java等后端语言来编写该接口。 接下来，在前端uniapp的代码中，可以使用uni.request函数来发送网络请求获取图片数据。这个函数可以发送HTTP请求到后端接口并获取返回的数据。 在uni.request函数中，需要设置请求的url为后端接口的地址，并指定请求的方法（例如GET或POST）。同时，还可以设置请求头、请求参数等信息，以便服务器能够正确处理请求。 当接收到后端返回的图片数据后，可以在前端使用uni-app提供的相关组件（如<image>标签）来展示图片。可以将接收到的图片数据赋值给该组件的src属性，从而显示图片。 在图片展示的过程中，可以根据需要对图片进行进一步处理，比如调整大小、裁剪、添加滤镜等操作。uni-app提供了丰富的组件和插件来实现这些功能。 最后，根据具体需求和业务逻辑，确定是否需要对接口进行其他的错误处理或数据处理操作。比如判断接口返回的状态码，处理图片加载失败的情况等。 总之，在uniapp中编写接口返回图片数据需要通过后端服务器创建接口、前端发送网络请求、接收数据并在前端显示图片的过程来完成。通过合理的代码编写和组件使用，可以轻松实现该功能，并为用户提供良好的使用体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值