javascript - FileReader onload 仅在浏览器中第二次工作

Question

我正在使用 HTML5 进行浏览器内图像处理，在 Chrome 中遇到一个奇怪的问题，文件 API FileReader 类的 onload 事件处理程序只有在第二次在表单中选择文件时才能正确处理该文件。

知道如何让 Chrome 在第一时间处理这个事件吗？ 在我的控制台网络中，当我单击“编辑图像”时，当我第二次单击“编辑”按钮时，什么也没有出现，出现带有图像 blob 的 profilePic。 IDK 发生了什么。

代码:

function uploadFile(){
    var file = $scope.profilePic;
    console.log(file);
    var blob = new Blob([file], {
        "type": "text/html"
    });

    var reader = new FileReader();

    reader.onload = function(e) {
        var text = e.target.result.split(',')[1];
        console.log(text);
        $scope.loadedUser.profilePic = text;
    }

    reader.readAsDataURL(blob);
}; 

html:

<div layout-gt-sm="row" style="margin-bottom: 20px;">                                                    
    <input type="file" name="profilePic" fileread="profilePic"> 
</div>

Answer 1

快速修复是使用$scope.$apply:

reader.onload = function(e) {
    var text = e.target.result.split(',')[1];
    console.log(text);
    $scope.loadedUser.profilePic = text;
    //USE $apply
    $scope.$apply();
}

reader.onload 事件是在 AngularJS 框架之外发生的浏览器事件。对 AngularJS 范围的任何更改都需要使用以 $scope.$apply() 开始的 AngularJS 摘要循环进行处理。

_{(来源:angularjs.org)}

-- AngularJS Developer Guide (v1.1.5) - Concepts - Runtime