所有浏览器中FileReader() API失效问题求助

问题情况 #

• 错误提示含义明确，但完全无法理解触发原因
• 相关代码数月未改动，此前运行正常，近期修复其他Bug时发现该问题
• 已测试Firefox、Chrome、Brave、Edge（Chromium内核）、Opera，均出现相同问题
• 手机端测试结果一致，排除PC端环境异常
• 错误确定出现在new FileReader();实例创建步骤
• 疑惑：FileReader API是浏览器支持数十年的特性，为何所有浏览器都出现不支持的情况

相关代码 #

function readFile(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        var target = e.target || e.srcElement;
        reader.onload = function (e) {
            $uploadCrop.croppie('bind', {
                url: target.result,
                orientation: 4,
                zoom: 0,
                viewport: {
                    width: 500,
                    height: 500,
                    type: 'square'
                },
                    boundary: {
                    height: 300
                }   

            }).then(function(){
                console.log('jQuery bind complete');
            });

        }

        reader.readAsDataURL(input.files[0]);
    }
    else {
        swal("Sorry - you're browser doesn't support the FileReader API");
    }
}

问题定位与修复 #

核心问题 #

代码中var target = e.target || e.srcElement;这一行存在致命错误：当前函数readFile的参数是input，并未传入事件对象e，变量e未定义会直接抛出ReferenceError，中断函数执行，导致你误以为是FileReader实例创建失败。

修复后的代码 #

function readFile(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        
        reader.onload = function (e) {
            // 将target定义移到回调内部，使用回调的事件参数e
            var target = e.target || e.srcElement;
            $uploadCrop.croppie('bind', {
                url: target.result,
                orientation: 4,
                zoom: 0,
                viewport: {
                    width: 500,
                    height: 500,
                    type: 'square'
                },
                boundary: {
                    height: 300
                }   
            }).then(function(){
                console.log('jQuery bind complete');
            });
        }

        reader.readAsDataURL(input.files[0]);
    } else {
        swal("抱歉 - 你的浏览器不支持FileReader API");
    }
}

补充说明 #

FileReader API是所有现代浏览器稳定支持的特性，不会突然全面失效。此次问题完全是代码中的未定义变量错误导致的执行中断，并非API不支持。

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