Svelte中如何使用FileReader？onload方法失效问题排查

你的代码有两个核心问题导致FileReader的onload事件无法触发：

1. 未获取上传的文件对象
   你在uploadArchive函数里仅创建了FileReader实例，但没有从input元素中获取用户选择的文件。

2. 未调用FileReader的读取方法
   FileReader的onload事件只有在调用readAsText()、readAsDataURL()这类读取方法，完成文件读取后才会触发——你只绑定了事件，却没启动读取流程。

修复后的代码示例：

<input id="upload-file" type="file" accept=".txt" on:change={uploadArchive}>

<script>        
    function uploadArchive(event) {
        // 获取用户选择的第一个文件
        const file = event.target.files[0];
        if (!file) return; // 未选择文件时直接退出

        const reader = new FileReader()
        console.log('before load');
        reader.onload = function () {
            console.log('after load');
            console.log('文件内容:', reader.result); // 可获取读取后的文件内容
        };
        // 调用读取方法，此处以读取文本格式为例
        reader.readAsText(file);
    }
</script>

额外说明：

• 无需给uploadArchive添加async修饰符，FileReader基于事件实现异步逻辑，并非Promise，加async不会改变其执行机制。
• 要先判断event.target.files[0]是否存在，避免用户打开文件选择框后取消操作引发报错。

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