Reader.onload上傳圖像文件到blob angularjs

我在這個問題一天。當我嘗試點擊更新圖像按鈕時，會發生以下情況：儘管使用console.log，我仍然無法在第一次嘗試中進行圖像更新，但它會將正確的值返回給我。會發生什麼是當我第一次加載更新按鈕時向後端發出請求時，它總是返回先前圖像的blob，當我再次嘗試時，它會返回我嘗試在圖像中執行的圖像的blob先前的時刻並插入到數據庫中。總之，他總是提出遲到的要求，我並沒有這麼做，因爲。我已經嘗試添加$ scope。 $ Apply（）並沒有工作。Reader.onload上傳圖像文件到blob angularjs

First update the blob of the previous image

Second update the blob correct of the image

總之，我需要做更新兩次，能夠將圖像切換到一個我想要的。

代碼：

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

    var reader = new FileReader(); 

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

    reader.readAsDataURL(blob); 

};

HTML：

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

APP：問題的

app.directive("fileread", [function() { 
    return { 
     scope: { 
      fileread: "=" 
     }, 
     link: function (scope, element, attributes) { 
      element.bind("change", function (changeEvent) { 
       scope.$apply(function() { 
        scope.fileread = changeEvent.target.files[0]; 
        // or all selected files: 
        // scope.fileread = changeEvent.target.files; 
       }); 
      }); 
     } 
    } 
}]);

來源

2017-01-03 José Araújo

部分原因是DIRECTI ve使用與隔離範圍綁定的雙向=。摘要週期對於將數據從隔離範圍轉移到父範圍是必要的。

一種方法是使用表達&結合和暴露所述文件作爲本地：

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

app.directive("fileread", function() { 
    return { 
     scope: { 
      //fileread: "=" 
      fileread: "&" 
     }, 
     link: function (scope, element, attributes) { 
      element.bind("change", function (changeEvent) { 
       scope.$apply(function() { 
       var file = changeEvent.target.files[0]; 
       scope.fileread({$file: file}); 
       scope.$apply() 
      }); 
     } 
    } 
});

在上面的例子中，當改變事件發生時，該指令的計算結果所限定的角表達通過fileread屬性與文件公開爲$file。 $file值可立即用於父範圍，而無需觀察者（和摘要循環）將值從隔離範圍轉移到父範圍。

另一個問題是reader.onload事件發生在AngularJS框架之外，並且需要$scope.$apply()來處理對範圍的更改。有關更多信息，請參閱SO: FileReader onload only works the second time around in browsers。

來源

2017-01-03 18:45:29 georgeawg

Reader.onload上傳圖像文件到blob angularjs

回答

相關問題