Reader.onload upload Bilddatei in Blob angularjs

Question

Ich bin in diesem Problem ein paar Tage. Was passiert, wenn ich versuche, auf die Schaltfläche zum Aktualisieren des Bildes zu klicken, kann ich die Bildaktualisierung beim ersten Versuch nicht ausführen. Trotz meiner console.log gebe ich den korrekten Wert zurück. Was passiert ist, wenn ich beim ersten Laden der Aktualisierungsschaltfläche die Anfrage an das Backend stelle, gibt es immer den Blob des Bildes zurück, das vorher war, und wenn ich es erneut versuche, gibt es den Blob des Bildes zurück, das ich versucht habe vorheriger Moment und fügt in DB ein. Kurz gesagt, er ist immer mit einer späten Anfrage und ich mache es nicht, weil. Ich habe bereits versucht, den $ scope hinzuzufügen. $ Apply() und es hat nicht funktioniert.

First update the blob of the previous image

Second update the blob correct of the image

Kurz gesagt muss ich zweimal aktualisiere der Lage sein, das Bild zu dem ändern, was ich will.

Code:

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; 
       }); 
      }); 
     } 
    } 
}]); 

Answer 1

Ein Teil des Problems ist, dass der Directi ve verwendet bidirektionale = Bindung mit isolieren Bereich. Ein Digest-Zyklus ist erforderlich, um die Daten vom Isolate-Bereich zum übergeordneten Bereich zu übertragen.

Ein Ansatz Ausdruck zu verwenden ist & Bindung und die Datei als lokalen aussetzen:

<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() 
      }); 
     } 
    } 
}); 

Im obigen Beispiel, wenn ein Änderungsereignis auftritt, wertet die Richtlinie den Angular Ausdruck definiert durch das Attribut fileread mit der Datei als $file ausgesetzt. Der Wert $file steht dem übergeordneten Bereich sofort zur Verfügung, ohne dass ein Watcher (und Digest-Zyklus) den Wert vom Isolate-Bereich in den übergeordneten Bereich übertragen muss.

Ein weiteres Problem ist, dass reader.onload Ereignis außerhalb des AngularJS-Framework auftritt und eine $scope.$apply() benötigt, um die Änderungen an Umfang zu verarbeiten. Weitere Informationen finden Sie unter SO: FileReader onload only works the second time around in browsers.