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 Developer Guide (v1.1.5) - Concepts - Runtime