使用Transcrypt与FileReader加载本地图片失败：result返回null

嘿，我之前也踩过Transcrypt结合FileReader的坑，result返回null大概率是异步操作没处理好！咱们来一步步解决这个问题：

最常见的原因：没等异步读取完成就访问result #

FileReader是异步API，调用readAsDataURL后不会立刻完成读取，如果你马上访问reader.result，自然会拿到null。必须把处理结果的逻辑放在onload回调里，等读取完成后再执行。

修正后的代码示例 #

read_file3.py（Transcrypt代码）

from browser import document, alert

def load_image(evt):
    # 先确认用户选中了文件
    selected_files = evt.target.files
    if not selected_files:
        alert("请先选择一张图片！")
        return

    target_file = selected_files[0]
    # 创建FileReader实例
    reader = document.createElement('FileReader')

    # 定义读取完成后的回调函数
    def on_read_complete(e):
        # 这里result才会有有效值
        image_data = e.target.result
        if image_data:
            # 把图片插入到页面中
            img_element = document.createElement('img')
            img_element.src = image_data
            img_element.style.maxWidth = "500px"
            document.body.appendChild(img_element)
        else:
            alert("图片读取失败，result返回null")

    # 绑定onload事件
    reader.onload = on_read_complete
    # 开始读取文件为DataURL
    reader.readAsDataURL(target_file)

# 给文件选择框绑定change事件
document['image-upload'].bind('change', load_image)

对应的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transcrypt 加载本地图片</title>
</head>
<body>
    <h3>选择一张本地图片</h3>
    <input type="file" id="image-upload" accept="image/png, image/jpeg, image/gif">
    <!-- 引入Transcrypt编译后的JS文件 -->
    <script src="__javascript__/read_file3.js"></script>
</body>
</html>

关键注意点 #

• 异步回调是核心：所有依赖result的逻辑必须放在onload回调里，这是FileReader的工作机制，和Transcrypt无关，原生JS也得这么处理。
• 先检查文件是否存在：用户可能没选文件就触发事件，这时候files是空的，提前判断可以避免报错。
• Transcrypt的DOM交互：用document.createElement创建FileReader，绑定事件用bind方法，和原生JS的逻辑一致，只是用Python语法写而已。

如果还是有问题，可以检查一下：

• 编译Transcrypt时有没有报错（比如执行transcrypt -b read_file3.py）
• 浏览器控制台有没有JS报错（按F12打开开发者工具查看Console面板）

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