如何在Flask服务端接收并保存XHR POST的Blob图片？

先讲清楚核心问题：blob:开头的URL是浏览器本地的临时链接，仅在当前浏览器会话内有效，Flask服务端完全没法通过这个URL获取图片内容——它不指向任何服务端或公网可访问的资源。所以你之前的思路走不通，得换个方式来做。

1. 前端改逻辑：直接传Blob文件，别传Blob URL #

前端把Blob对象放到FormData里发送POST请求，这是文件上传的标准做法：

// 假设你已经拿到了Blob格式的图片（比如从文件选择框、canvas生成）
const imageBlob = ...;
const formData = new FormData();
// 把Blob加到FormData，第三个参数是自定义的文件名
formData.append('uploaded_image', imageBlob, 'my-photo.jpg');

// 发送XHR请求
const xhr = new XMLHttpRequest();
xhr.open('POST', '/save-image', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('图片上传搞定');
  }
};
xhr.send(formData);

2. Flask服务端接收并保存图片 #

在Flask里通过request.files获取上传的文件，然后保存到本地，还能顺便做处理：

from flask import Flask, request
import os
from PIL import Image  # 要处理图片的话，先装pillow：pip install pillow

app = Flask(__name__)
# 配置上传目录，自动创建不存在的文件夹
UPLOAD_DIR = './uploaded_images'
os.makedirs(UPLOAD_DIR, exist_ok=True)
app.config['UPLOAD_DIR'] = UPLOAD_DIR

@app.route('/save-image', methods=['POST'])
def save_image():
    # 检查有没有上传文件
    if 'uploaded_image' not in request.files:
        return '没收到上传的文件', 400
    file = request.files['uploaded_image']
    if file.filename == '':
        return '没选文件', 400
    
    if file:
        # 拼接保存路径
        save_path = os.path.join(app.config['UPLOAD_DIR'], file.filename)
        # 保存原始图片
        file.save(save_path)
        
        # 可选：处理图片（比如压缩尺寸）
        with Image.open(save_path) as img:
            img.thumbnail((600, 600))  # 缩到最大600x600
            processed_path = os.path.join(app.config['UPLOAD_DIR'], f'resized_{file.filename}')
            img.save(processed_path)
        
        return f'图片已保存：{save_path}\n处理后图片：{processed_path}', 200

if __name__ == '__main__':
    app.run(debug=True)

3. 非要传Blob URL？（不推荐） #

如果因为某些限制必须传Blob URL，那前端得先把Blob URL转成Blob对象再上传——相当于多做一步转换，没必要但能实现：

const blobUrl = ...; // 你之前生成的Blob链接
fetch(blobUrl)
  .then(response => response.blob())
  .then(blob => {
    const formData = new FormData();
    formData.append('uploaded_image', blob, 'my-photo.jpg');
    // 后面的请求逻辑和上面一样
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/save-image', true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        console.log('上传成功');
      }
    };
    xhr.send(formData);
  });

内容的提问来源于stack exchange，提问作者Toby Liao