前后端通过Json&&Base64实现图片交互

一、导入依赖

<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.8.4</version>
</dependency>

二、将图片导入流进行base64编码

//读取文件        
File file = new File("D:\\write_space\\pro_test\\code_01.pbg");
BufferedImage read = ImageIO.read(file);  
//写入流         
FastByteArrayOutputStream os = new FastByteArrayOutputStream();          
ImageIO.write(read,"jpeg",  os); 
//进行编码       
String encode = Base64.encode(os.toByteArray()); 
//添加前端需要代码  也可以前端添加       
String img="data:image/jpeg;base64,"+encode;        
return img;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以通过以下步骤将图片传输到Flask接口: 1. 在前端使用JavaScript或其他适当的方法,将图片转换为Base64编码。您可以使用HTML5的File API来获取用户选择的图片文件,并使用FileReader API将其转换为Base64编码。 2. 将Base64编码的图片作为数据,通过POST请求发送到Flask接口。您可以使用JavaScript中的fetch API或其他HTTP请求库来发送POST请求。 3. 在Flask应用程序中,接收POST请求并解析请求的数据。您可以使用Flask的request对象来访问请求数据。 4. 将接收到的Base64编码的图片数据解码为二进制数据,并保存为图片文件。您可以使用Python的base64模块来进行解码,并使用Python的io模块将二进制数据保存为文件。 以下是一个简单的示例代码,展示了前端和Flask后端的交互过程: 前端代码(HTML和JavaScript): ```html <!DOCTYPE html> <html> <head> <title>图片上传</title> </head> <body> <input type="file" id="imageInput"> <button onclick="uploadImage()">上传</button> <script> function uploadImage() { var fileInput = document.getElementById('imageInput'); var file = fileInput.files[0]; var reader = new FileReader(); reader.onload = function(event) { var base64Image = event.target.result; sendImage(base64Image); }; reader.readAsDataURL(file); } function sendImage(base64Image) { fetch('/upload', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({image: base64Image}) }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.log(error)); } </script> </body> </html> ``` Flask后端代码: ```python from flask import Flask, request import base64 import io app = Flask(__name__) @app.route('/upload', methods=['POST']) def upload(): image_data = request.json['image'] image_data = image_data.split(',')[1] # 去除Base64编码前的前缀部分 image_binary = base64.b64decode(image_data) with open('uploaded_image.jpg', 'wb') as f: f.write(image_binary) return {'message': '图片上传成功'} if __name__ == '__main__': app.run() ``` 请注意,此示例仅演示了基本的图片上传过程,并将图片保存到服务器上的文件系统中。在实际应用中,您可能需要进行更多的验证和处理,例如检查图片格式、大小限制等。另外,为了安全起见,您还可以在Flask应用程序中设置适当的安全措施来防止恶意图片上传攻击。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值