Flask GET请求返回JSON报错：bytes类型无法被JSON序列化

我用Reactjs、Flask和PostgreSQL搭建网站，PostgreSQL数据库中有个url字段是bytea类型，存储的是通过psycopg2.Binary()转换后的图片数据。通过GET接口将数据以JSON格式返回给前端时，出现TypeError: Object of type bytes is not JSON serializable错误。

Flask代码（app.py） #

def format_event(event):
    return {
        "name": event.name,
        "id": event.id, 
        "url" : event.url,
        "type": event.type,
        "width": event.width,
        "height": event.height
    }

#get all events
@app.route('/events', methods=['GET'])
def get_events():
    events = Event.query.order_by(Event.id.asc()).all()
    event_list = []
    for event in events:
        event_list.append(format_event(event))
    return {'events' : event_list}

报错信息 #

Traceback (most recent call last):
  File "C:\Users\joshu\.virtualenvs\backend-N0JzJpE8\Lib\site-packages\flask\app.py", line 1463, in wsgi_app
    response = self.full_dispatch_request()
               
  File "C:\Users\joshu\.virtualenvs\backend-N0JzJpE8\Lib\site-packages\flask\app.py", line 873, in full_dispatch_request
    return self.finalize_request(rv)
           
  File "C:\Users\joshu\.virtualenvs\backend-N0JzJpE8\Lib\site-packages\flask\app.py", line 892, in finalize_request
    response = self.make_response(rv)
              
  File "C:\Users\joshu\.virtualenvs\backend-N0JzJpE8\Lib\site-packages\flask\app.py", line 1183, in make_response
    rv = self.json.response(rv)
         
  File "C:\Users\joshu\.virtualenvs\backend-N0JzJpE8\Lib\site-packages\flask\json\provider.py", line 214, in response
    f"{self.dumps(obj, **dump_args)}\n", mimetype=self.mimetype
       
  File "C:\Users\joshu\.virtualenvs\backend-N0JzJpE8\Lib\site-packages\flask\json\provider.py", line 179, in dumps
    return json.dumps(obj, **kwargs)
           
  File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.12_3.12.752.0_x64__qbz5n2kfra8p0\Lib\json\__init__.py", line 238, in dumps
    **kw).encode(obj)
          
  File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.12_3.12.752.0_x64__qbz5n2kfra8p0\Lib\json\encoder.py", line 200, in encode
    chunks = self.iterencode(o, _one_shot=True)
             
  File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.12_3.12.752.0_x64__qbz5n2kfra8p0\Lib\json\encoder.py", line 258, in iterencode
    return _iterencode(o, 0)
           
  File "C:\Users\joshu\.virtualenvs\backend-N0JzJpE8\Lib\site-packages\flask\json\provider.py", line 121, in _default
    raise TypeError(f"Object of type {type(o).__name__} is not JSON serializable")
TypeError: Object of type bytes is not JSON serializable

解决方案 #

JSON不支持直接序列化bytes类型，需将bytea字段转换为Base64编码的字符串，前端可直接使用该字符串生成图片。

方法1：返回可直接使用的Data URI #

修改format_event函数，将bytes转成Base64字符串并拼接为Data URI格式：

import base64

def format_event(event):
    # 将bytes类型的图片数据转成Base64字符串
    image_base64 = base64.b64encode(event.url).decode('utf-8')
    return {
        "name": event.name,
        "id": event.id, 
        "url" : f"data:{event.type};base64,{image_base64}",  # 直接生成img可用的src值
        "type": event.type,
        "width": event.width,
        "height": event.height
    }

前端使用时直接赋值给img的src：

<img src={event.url} alt={event.name} />

方法2：仅返回Base64字符串 #

如果希望前端自行拼接格式，可只返回Base64编码后的字符串：

import base64

def format_event(event):
    image_base64 = base64.b64encode(event.url).decode('utf-8')
    return {
        "name": event.name,
        "id": event.id, 
        "url" : image_base64,
        "type": event.type,
        "width": event.width,
        "height": event.height
    }

前端使用时自行拼接：

<img src={`data:${event.type};base64,${event.url}`} alt={event.name} />

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