用flask将前端传来的blob转为图片格式 保存在/static/temp文件夹下 怎么写
时间: 2024-01-08 20:04:08 浏览: 234
可以按照以下步骤实现:
1. 在前端,使用JavaScript的FileReader API将图片文件转换为Blob数据,然后使用XMLHttpRequest对象将Blob数据发送给Flask后端。
2. 在后端,使用Flask的request对象获取前端发送的Blob数据,并将其保存为图片文件。
3. 将保存的图片文件路径返回给前端。
下面是一个示例代码:
前端代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Upload Image</title>
</head>
<body>
<input type="file" id="fileInput">
<button onclick="uploadImage()">Upload</button>
<div id="result"></div>
<script>
function uploadImage() {
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function() {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload-image');
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.send(reader.result);
xhr.onload = function() {
var resultDiv = document.getElementById('result');
var imgPath = xhr.responseText;
resultDiv.innerHTML = '<img src="' + imgPath + '">';
}
}
}
</script>
</body>
</html>
```
后端代码:
```python
from flask import Flask, request, render_template, url_for
from io import BytesIO
from PIL import Image
import os
app = Flask(__name__)
@app.route('/upload-image', methods=['POST'])
def upload_image():
# 获取前端发送的Blob数据
image_blob = request.data
# 将Blob数据转换为Bytes类型
image_bytes = BytesIO(image_blob).read()
# 使用Pillow库将Bytes数据转换为图片格式,并保存为文件
img = Image.open(BytesIO(image_bytes))
img_path = os.path.join(app.static_folder, 'temp', 'temp.jpg')
img.save(img_path)
# 返回图片文件路径
return url_for('static', filename='temp/temp.jpg')
```
在上面的示例中,我们使用JavaScript的FileReader API将图片文件转换为Blob数据,然后使用XMLHttpRequest对象将Blob数据发送给Flask后端。在后端,我们使用Flask的request对象获取前端发送的Blob数据,并将其保存为图片文件。最后,返回保存的图片文件路径给前端。需要注意的是,上面的代码仅供参考,具体实现方式可能因为项目的不同而有所不同。
阅读全文