后端接口返回一张图片

最新推荐文章于 2024-07-23 14:32:03 发布
最新推荐文章于 2024-07-23 14:32:03 发布
阅读量1.2w 收藏 17
点赞数 3
分类专栏： 电子合同登录页改造
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Luckyzhoufangbing/article/details/103233218
版权

（一）项目背景

图形验证码后端接口返回一张图片，前端需要将返回的图片放到前端页面中

（二）解决方法以及代码

axios.get(API.getImgCode, {
  params: params,
  responseType: 'blob' // 必须说明 axios 请求类型
}).then((res) => {
  this.setState({
  imgCodeUrl: window.URL.createObjectURL(res.data) // 后端返回前端渲染
 })
}).catch(() => {
  this.setState({
  imgCodeUrl: require('@/assets/imageFail.png') // 默认图片
 })
})

（三）注意点汇总

1. axios 请求必须 添加 responseType, 不然图片不显示

2. 拿到接口的二进制

 把这个二进制 window.URL.createObjectURL() 就ok

（四）blob 介绍

https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

luckybing~
关注
  • 3
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
2022软工-安庆集团-接口文档
11-27
本文档是针对2022年安庆集团的“软工”项目，主要涉及个人任务管理和个人牌库管理的后端接口。 **个人任务接口** 1. **查询全部个人任务库 (GET personaltask/listpersonaltask)** - 接口功能：获取用户的所有...
VUE实现图片验证码功能
10-16
如果使用后端接口来获取验证码，则可以将请求发送到服务器以获取新的验证码。 ```javascript export default { methods: { getIdentifyingCode: function(bRefresh) { let identifyCodeSrc = "***"; if ...
springboot 接口返回图片
shuaiqijiejie的博客
10-03 7156
使用springboot接口获取图片url地址，浏览器可直接访问
后端把图片返回给前端
胡萝北的博客
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
后端接口返回图片，前端的处理方法
最新发布
qq_57039857的博客
07-23 318
出现问题的原因的axios默认返回的是json文本形式，二进制图片数据被强制转换成了 json 文本形式。首先，在axios中，将responseType默认返回数据类型json改为arraybuffer类型。
后端直接返回一张图片前端如何显示
qq_40137978的博客
10-18 839
图片转换
后端直接返回一个图片对象，前端如何接收并显示在图片上
qq_44906497的博客
10-26 1723
【代码】后端直接返回一个图片对象，前端如何接收并显示在图片上。
后端如何返回一个（图片）文件流，并在前端vue展示。
热门推荐
qq_43952288的博客
03-23 1万+
以表示你将以blob形式接收（必须添加）。1，获取文件参数（非必须，根据自己情况添加）2，拿到接口返回值后，将其转为blob形式。1，首先在你的axios接口上添加。标签的src上，就可展示此图片了。将这个src变量赋值到。
Vue解析剪切板图片并实现发送功能
11-21
需要注意的是，这个过程涉及到前端的DOM操作、文件处理、图片压缩算法以及后端的接口设计等多方面的知识，需要对整个Web开发流程有深入理解。在实际开发中，还应考虑错误处理、用户体验优化等问题。
微信小程序实现图片上传
10-16
这个接口可以返回图片的临时文件路径，这些路径可以用于预览、裁剪或上传到服务器。 ```javascript chooseWxImage: function (type) { var that = this; // ... wx.chooseImage({ sizeType: ['original', '...
thinkphp3.2.3上传多张图片+上传完预览
09-26
当用户选择图片后，SWFUpload会调用我们的后端接口（通常是AJAX请求）。在接口中，我们可以使用`$_FILES`全局变量获取上传的文件信息，然后通过生成缩略图的方式预览图片。例如，可以使用GD库或者Imagine库生成缩略...
微信小程序实现同时上传多张图片
10-15
本篇文章将详细讲解如何通过微信小程序API和后端接口协同工作来实现这一功能。 首先，我们需要在小程序的data中定义一个数组`images`，用于存储用户选择的图片路径： ```javascript data: { images: [], // 选择...
webuploader上传单张图片
07-19
当然，实际应用中可能需要根据后端API进行适当的调整，比如添加请求头、处理返回的URL等。 ```html <!DOCTYPE html> <title>WebUploader 单张图片上传示例 /* 自定义样式 */ ...
代码实例ajax实现点击加载更多数据图片
10-17
这里的`dataNews.json`是数据源，通常包含一个JSON数组，每个元素代表一张图片的信息，如URL和标题。在实际应用中，这个URL可能指向一个服务器端接口，返回动态生成的数据。 总结来说，这个示例展示了如何利用AJAX...
微信小程序多张图片上传功能
12-10
在微信小程序中，由于其API的设计，一次只能上传一张图片，但通过编程技巧，我们可以实现多张图片的连续上传。这个过程主要涉及到两个关键的微信小程序API：`wx.chooseImage` 和 `wx.uploadFile`。 `wx.chooseImage...
微信小程序开发之服务器图片接收PHP版
05-13
// 假设我们选择了一张图片 // 上传图片到服务器 wx.uploadFile({ url: 'http://your-server-url/upload.php', // 后端服务器接口地址 filePath: tempFilePath, // 需要上传的文件路径 name: 'file', // ...
后端返回各种图片形式在前端的转换及展示
qq_43532275的博客
02-08 8460
后端返回各种图片形式在前端的转换及展示
后端返回图片前端如何展示
m0_65915285的博客
05-22 458
如图，后端返回一个纯图片，前端打印出来是这样的，这样就可以将blob转成url进行展示了。这个时候返回的就是这样子的。让返回的格式是blob格式。
接口返回一张图片处理
孤月葬花魂的博客
08-09 245
【代码】接口返回一张图片处理。
ython + Flask + SQLAlchemy 实现一个后端接口,实现一张表的 CRUD(增删改查)
05-15
好的，我来给你介绍一下如何使用Python、Flask和SQLAlchemy来实现一个后端接口，以实现一张表的CRUD操作。这里我们将使用SQLite数据库来存储数据。 首先，我们需要安装Flask和SQLAlchemy库。你可以使用pip来安装它们： ``` pip install flask sqlalchemy ``` 接下来，我们需要创建一个Flask应用程序，并将其连接到SQLite数据库。在这个例子中，我们将创建一个名为app.py的文件，并在其中编写代码。 ```python from flask import Flask, jsonify, request from flask_sqlalchemy import SQLAlchemy # 创建Flask应用程序 app = Flask(__name__) # 配置数据库连接 app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///data.db' app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False # 创建SQLAlchemy实例 db = SQLAlchemy(app) # 定义模型类 class User(db.Model): id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(50), nullable=False) email = db.Column(db.String(50), nullable=False) def __repr__(self): return f'<User {self.name}>' # 创建数据库表 db.create_all() # 添加一些示例数据 user1 = User(name='Alice', email='alice@example.com') user2 = User(name='Bob', email='bob@example.com') db.session.add(user1) db.session.add(user2) db.session.commit() ``` 在这个例子中，我们创建了一个名为User的模型类，并定义了id、name和email三个属性。我们还定义了__repr__方法，以便在打印对象时可以更好地显示。 接下来，我们使用db.create_all()方法创建了数据库表，并使用db.session.add()方法向表中添加了两个示例数据。 现在，我们可以开始实现CRUD操作了。首先，让我们来实现一个获取所有用户的接口。 ```python @app.route('/users', methods=['GET']) def get_all_users(): users = User.query.all() result = [] for user in users: user_data = {'id': user.id, 'name': user.name, 'email': user.email} result.append(user_data) return jsonify(result) ``` 在这个接口中，我们使用User.query.all()方法查询了所有用户，并将结果转换成一个列表。然后，我们遍历这个列表，并将每个用户的id、name和email属性添加到一个字典中。最后，我们使用jsonify()方法将这个字典转换成一个JSON格式的响应。 接下来，让我们来实现一个获取单个用户的接口。 ```python @app.route('/users/<int:user_id>', methods=['GET']) def get_user(user_id): user = User.query.get_or_404(user_id) return jsonify({'id': user.id, 'name': user.name, 'email': user.email}) ``` 在这个接口中，我们使用User.query.get_or_404(user_id)方法查询了指定id的用户。如果找不到这个用户，Flask会自动返回一个404错误响应。否则，我们将该用户的id、name和email属性添加到一个字典中，并使用jsonify()方法将其转换成JSON格式的响应。 接下来，让我们来实现一个添加用户的接口。 ```python @app.route('/users', methods=['POST']) def add_user(): user_data = request.get_json() user = User(name=user_data['name'], email=user_data['email']) db.session.add(user) db.session.commit() return jsonify({'message': 'User created successfully!'}) ``` 在这个接口中，我们首先使用request.get_json()方法获取到POST请求中的JSON数据，并将其转换成一个字典。然后，我们使用这个字典中的name和email属性创建一个新的用户，并将其添加到数据库中。最后，我们返回一个JSON格式的响应，表示用户已创建成功。 最后，让我们来实现一个删除用户的接口。 ```python @app.route('/users/<int:user_id>', methods=['DELETE']) def delete_user(user_id): user = User.query.get_or_404(user_id) db.session.delete(user) db.session.commit() return jsonify({'message': 'User deleted successfully!'}) ``` 在这个接口中，我们首先使用User.query.get_or_404(user_id)方法查询了指定id的用户。如果找不到这个用户，Flask会自动返回一个404错误响应。否则，我们使用db.session.delete(user)方法将该用户从数据库中删除，并提交更改。最后，我们返回一个JSON格式的响应，表示用户已成功删除。 到此为止，我们已经完成了使用Python、Flask和SQLAlchemy实现一张表的CRUD操作的教程。你可以在这个基础上继续扩展你的应用程序，实现更多的功能。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值