Jupyter Notebook/Voila中ipywidgets无法保存上传图片报错问题

• 读值时机错误：单元格内的代码会在Notebook/Voila页面初始化时一次性执行完，手动执行uploader.value时还未完成文件上传操作，自然返回空字典；用户后续上传文件的操作不会触发单元格代码重跑，同步读值的写法本身就不成立。
• API版本不兼容：ipywidgets 8.0及以上版本重构了FileUpload组件的接口，移除了实例直接挂载的content属性，所有上传文件的元信息、字节内容统一收纳在value属性的字典结构中。

以下代码直接覆盖图片上传、本地保存、页面预览全流程，兼容当前主流ipywidgets 8.x版本，可直接在Voila中运行：

import os
import ipywidgets as ipw
from IPython.display import display

# 预定义图片存储文件夹，不存在则自动创建
UPLOAD_SAVE_PATH = "./stored_images"
os.makedirs(UPLOAD_SAVE_PATH, exist_ok=True)

# 初始化上传组件，限制仅可选择图片格式
uploader = ipw.FileUpload(
    accept="image/*",
    multiple=False
)
# 预览区容器
preview_area = ipw.Output()

# 上传完成触发的回调逻辑
def handle_upload(change):
    preview_area.clear_output()
    uploaded_files = change.new
    if not uploaded_files:
        return

    for file_name, file_meta in uploaded_files.items():
        # 读取上传的文件字节
        img_bytes = file_meta["content"]
        # 拼接本地保存路径
        save_full_path = os.path.join(UPLOAD_SAVE_PATH, file_name)
        # 写入本地文件
        with open(save_full_path, "wb") as f:
            f.write(img_bytes)
        
        # 渲染预览
        with preview_area:
            print(f"文件已保存至：{save_full_path}")
            display(ipw.Image(value=img_bytes, width=450))

# 绑定上传监听事件
uploader.observe(handle_upload, names="value")

# 渲染页面组件
display(uploader, preview_area)

• 不要用同步写法直接读取组件属性，所有依赖用户上传结果的逻辑，必须通过observe绑定值变化回调来触发，否则永远只能拿到初始化阶段的空值。
• 如果你使用的是极老的ipywidgets 7.x版本，value返回的是元组列表结构，每个元素对应一个上传文件的字典，可根据实际版本调整读取逻辑，目前pip默认安装的8.x版本直接用上述代码即可。
• Voila部署时无需修改代码，上传的文件会存储在Voila进程启动目录下的stored_images文件夹中。

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