angular2 filereader auf mysteriöse Weise fehlschlägt

Question

Ich verwende das Setup unten gezeigt, um Bilddatei in angular2 zu lesen. Ich verwende input Element, um das Fenster zu zeigen, um Datei zu wählen und dann die addThumbnail Funktion auszulösen, wenn die Datei gewählt wird. Der Klick auf die input wird durch eine andere Taste ausgelöst. Ich habe festgestellt, dass der Auslöser der addThumbnail-Funktion manchmal nicht erfolgreich ausgeführt wird, d. H. Die Funktion wird nach dem Auswählen einer Datei nicht einmal ausgelöst. Dies passiert möglicherweise 1 von 5 Mal. Ich bin mir nicht sicher, ob dies aufgrund der Größe der Datei passieren könnte. Ich habe versucht, dies zu debuggen, indem ich einen Breakpoint innerhalb der addThumbnail Funktion einstelle, aber das wird nicht einmal ausgelöst.

<div class="extra-image-container"> 
    <input type="file" accept="image/*" (change)="addThumbnail($event)" style="display:none;" #fileInput2/> 
    <div class="thumbnail-button" (click)="fileInput2.click()"> 
     <span><i class="material-icons">photo_camera</i></span><br> 
     <span>Extra Images</span> 
    </div> 
</div> 

Dies ist die AddThumbnail-Funktion und die Datei-Reader-Funktion, die ich verwende.

addThumbnail(event) { 
    console.log('adding thumbnail'); 
    var subscription = this.readImage(event.target).subscribe((result) => { 
     this.thumbnails.push(result.imageUrl); 
     this.editedThumbnails.push(result.imageUrl); 
     subscription.unsubscribe() 
    }); 
} 

readImage(inputValue: any) : Observable<any> { 
    var file:File = inputValue.files[0]; 
    var myReader:FileReader = new FileReader(); 
    var observable = new Observable(observer => { 
     myReader.onloadend = (e) => { 
      observer.next({imageUrl: myReader.result}); 
      console.log("image loaded"); 
      // var image = new Image(); 
      // image.addEventListener("load",() => { 
      //  observer.next({ 
      //   imageWidth: image.width, 
      //   imageHeight: image.height, 
      //   imageSize: file.size/1000, 
      //   imageUrl: myReader.result 
      //  }) 
      //  console.log("image loaded"); 
      // }) 
      // image.src = myReader.result; 
     } 
     myReader.readAsDataURL(file);//triggers the callback 
    }) 
    return observable 
} 

Answer 1

Es stellt sich heraus, dass, wenn Sie dieselbe Datei nacheinander gelesen, dann wird die change nicht ausgelöst, da die Dateien gleich sind. Um dies zu beheben, musste ich lediglich den Wert des Eingabeelements auf eine leere Zeichenfolge setzen, nachdem eine Datei geladen wurde.

@ViewChild('fileInput2') private thumbImageInput: ElementRef; 
// and in the addThumbnail method: 
addThumbnail(event) { 
    var subscription = this.readImage2(event.target).subscribe((result) => { 
     this.thumbnails.push(result.imageUrl); 
     this.editedThumbnails.push(result.imageUrl); 
     window.URL.revokeObjectURL(result.imageUrl); 
     this.thumbImageInput.nativeElement.value = ''; 
    }); 
}