FileReader onload只能在瀏覽器中第二次使用

我正在使用HTML5處理瀏覽器內圖像處理，並且在Chrome中使用onload事件處理程序處理File API FileReader類時出現了一個奇怪的問題，該文件只能正確處理第二次在表格中選擇它。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>

來源

2017-01-02 José Araújo

我很困惑，如果它是一個形象，你爲什麼要創建它的HTML斑點，而實際上，你爲什麼連創建文件的斑點？ ??文件是Blob。 – Kaiido

我需要將我的圖像轉換爲blob來發送後端。 –

但「文件是一個Blob」！無論你用Blob做什麼都可以用File來完成。你不需要轉換它，而且不需要轉換它。 – Kaiido

快速的解決辦法是使用$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

來源

2017-01-03 06:13:54 georgeawg

感謝您的評論。但是，當我嘗試更新圖像我繼續相同的錯誤。這是自那以來的兩次。我陷入了這個問題 –

FileReader onload只能在瀏覽器中第二次使用

回答

相關問題