如何在Flask中从AJAX POST请求获取Base64图片数据

问题核心 #

你当前代码的关键错误是后端数据获取方式不对：前端通过AJAX发送的是Form Data格式的Base64字符串，后端却用request.files["image"]尝试获取（这是处理文件上传的专用方式），导致无法正确拿到数据。

前端代码（微调补充） #

你的前端代码已经正确提取了Base64字符串并发送，这里补充回调方便调试：

var dataURL = canvas.toDataURL('image/jpeg');
var base64 = dataURL.replace(/^data:image\/(png|jpeg);base64/, "");
console.log(base64);

$.ajax({
  url: "http://127.0.0.1:5000/",
  type: "POST",
  data: { 
    'image': base64
  },
  success: function(response) {
    console.log("图片上传成功:", response);
  },
  error: function(err) {
    console.error("上传失败:", err);
  }
});

后端代码修正（核心改动） #

改用request.form获取Base64字符串，解码后保存为本地图片：

from flask import Flask, request
import base64

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":
        # 获取前端传来的Base64字符串
        base64_str = request.form.get('image')
        if not base64_str:
            return "未接收到图片数据", 400
        
        try:
            # 解码Base64为二进制图片数据
            img_data = base64.b64decode(base64_str)
            # 保存到本地，可自行修改文件名和路径
            with open("uploaded_image.jpg", "wb") as f:
                f.write(img_data)
            return "图片保存成功"
        except Exception as e:
            return f"保存失败: {str(e)}", 500
    return "请通过POST请求上传图片"

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

关键说明 #

• 前端未设置contentType: 'application/json'，AJAX默认以application/x-www-form-urlencoded格式发送数据，后端需用request.form获取。
• Base64字符串必须解码为二进制数据，才能写入图片文件。
• 异常捕获可避免无效Base64导致程序崩溃，同时给前端返回明确的错误提示。

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