MongoDB图片转JSON序列化遇UnicodeDecodeError问题排查

为什么decode('utf-8')会报错 #

图片的二进制数据本质是非文本字节流（比如JPG/PNG的文件结构包含大量不符合UTF-8编码规则的字节），而utf-8解码仅适用于原本就是UTF-8编码的文本内容。当你强行用它解码图片二进制时，那些不符合UTF-8编码规范的字节就会触发UnicodeDecodeError——这和你的图片数据本身是否正常无关，只是解码方式完全错误。

正确的JSON序列化方案 #

要把图片二进制传给React前端，应该用Base64编码把二进制转成ASCII字符串（完全兼容JSON序列化）：

1. Flask后端处理：

import base64
from bson import Binary

# 从MongoDB取出的图片二进制（假设是MongoEngine的BinaryField类型）
image_binary = your_model.image_field

# 转成Base64字符串
base64_str = base64.b64encode(image_binary).decode('utf-8')

# 返回给前端的JSON数据
return jsonify({"image": base64_str, "content_type": "image/jpeg"})

2. React前端还原图片：
   拿到Base64字符串后，直接用data: URI加载：

function ImageComponent({ base64Str, contentType }) {
  return <img src={`data:${contentType};base64,${base64Str}`} alt="Uploaded" />;
}

补充说明 #

你之前能把二进制写入文件正常打开，是因为文件操作是直接按字节流写入，不需要编码/解码，完全保留了原始的图片二进制结构，所以没问题。而JSON只能序列化文本类型，必须把二进制转成合法的文本格式（Base64就是干这个的），不能直接解码成UTF-8文本。

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