Javascript File Render speichern Schlüssel in Onload-Methode?

Question

Ich möchte einen Schlüssel in Array speichern.

for (var i = 0; i < this.uploadedImages.length; i++) { 
    var reader = new FileReader(); 
    var vm = this; 
    reader.onload = function(e,i) { 
     var imageSrc = e.target.result; 
     vm.items.push({image : imageSrc,index : i}); 
    } 
    reader.readAsDataURL(input.files[i]); 
} 

Wie zu speichern ich in Index-Schlüssel in Artikel-Array.

Gerade jetzt habe ich 4 Elemente in dieses Array.uploadedImages übergeben, wenn ich Artikel-Array überprüft, es ist Speicher 3 in alle Elemente wie.

{ {image : 'path',index : 3},{image : 'path',index : 3}, 
    {image : 'path',index : 3},{image : 'path',index : 3} } 

Ich möchte ähnliche

{ {image : 'path',index : 0},{image : 'path',index : 1}, 
    {image : 'path',index : 2},{image : 'path',index : 3} } 

wie dies dank bitte tun helfen

Answer 1

Sie haben eine hier Schließung Problem.

Der onload Rückruf nach der Schleife ausgeführt wird, endet, während die i var hat es letzten Wert von 3.em

ist eine schnelle und schmutzige Lösung wird die Callback-Funktion mit einer anderen Funktion umwickeln, die während der Schleifeniteration läuft und schaffen eine Var mit dem aktuellen Wert.

reader.onload = function(idx){ 
     return function(e) { 
      var imageSrc = e.target.result; 
      vm.items.push({image : imageSrc,index : idx}); 
    }}(i) 

prüfen dies ähnlich JSFIDDLE Beispiel.