Bildvorschau vor dem Hochladen in Winkel 5

Ich verwende den folgenden Code, um die Bildvorschau zu implementieren:

onFileChange(event: any) {
this.userFile = event.target.files[0];
this.imageSelected = this.userFile.name;
if (event.target.files && event.target.files[0]) {
  const reader = new FileReader();
  reader.onload = (e: any) => {
    this.imageSrc = e.target.result;
  };
  reader.readAsDataURL(event.target.files[0]);
}}

Das funktioniert gut und zeigt die Bildvorschau an. Das Problem, mit dem ich ursprünglich konfrontiert war, war, dass ich bei jeder Erstellung einer Bildvorschau den folgenden Fehler in den Chrome-Entwicklerwerkzeugen erhielt:

Alles hat gut funktioniert, es gibt keine anderen Fehler.

Wenn ich auf die Null geklickt habe: 1, wurde ich an das Folgende weitergeleitet:

Nach einigem Fummeln und Problemlösen konnte ich die Lösung finden, die ich unten in die Bearbeitung aufgenommen habe.

EDIT: Hat es herausgefunden. Ich hatte nicht das || ' http://placehold.it/180 ' "in [src] =" in meiner Komponente.html enthalten. Ich denke, es ist ein Timing-Problem. Jetzt sortiert kein fehler mehr. 

Möglicherweise müssen Sie lediglich Ihren javascript function in TypeScript wie unten beschrieben ändern.

readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = (e:any) => {
             (<HTMLImageElement>document.getElementById('blah')).src=e.target.result 
             //assuming element with id blah will always be an ImageElement
        };

        reader.readAsDataURL(input.files[0]);
    }
}

Das sollte es sein.

Update

Sie können auch eine Eigenschaft definieren und sie an image src binden und ihren Wert wie folgt ändern:

Definieren Sie in Ihrer .ts-Datei vor constructor eine Eigenschaft als url und legen Sie ihren Standardwert auf http://placehold.it/180 fest.

url: string = 'http://placehold.it/180';

Sie können diese Eigenschaft in reader.onload wie folgt aktualisieren:

readURL(event:any) {
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();

    reader.onload = (event:any) => {
     this.url = event.target.result;
    }

    reader.readAsDataURL(event.target.files[0]);
  }
}

Ihre html wird nun wie folgt aussehen:

<input type='file' (change)="readURL(this);" />
<img id="blah" [src]="url" alt="your image" />

Bitte ändern Sie wie -> this.url = event.target.result;

readURL(event:any) {
    if (event.target.files && event.target.files[0]) {
        var reader = new FileReader();

        reader.onload = (event:any) = > {
            this.url = event.target.result;
        }

        reader.readAsDataURL(event.target.files[0]);
    }
}

Ich weiß, dass ich zu spät komme, aber gerade dieses Problem für Bild und Audio hatte. Die oben genannten Lösungen haben für Bilder gut funktioniert, für Audio jedoch nicht. Ich habe schließlich alles zum Laufen gebracht, indem ich ein URL-Objekt anstelle des FileReader-Objekts verwendet habe, das alle verwenden. etwas wie das Folgende

komponente.ts-Datei ~

imgSrc = 'assets/path/to/default/image.jpeg'

imgFileSelected(event: any) {
  if (event.target.files && event.target.files[0]) {
    this.imgSrc = URL.createObjectURL(event.target.files[0]);
  }
}

Meine component.html sieht aus wie ~

<img [src]="imgSrc | sanitizeUrl"> <!-- using a Custom Pipe -->

Schließlich habe ich eine benutzerdefinierte Pipe erstellt, um die Konsole von Warnungen zu befreien. Meine Pipe lautet wie folgt ~

@Pipe({
  name: 'sanitizerUrl'
})
export class SanitizerUrlPipe implements PipeTransform {

  constructor (
    private sanitize: DomSanitizer
  ) {}

  transform(value: string): SafeUrl {
    return this.sanitize.bypassSecurityTrustUrl(value);
  }
}

Um zu sehen, wie ich das für das Audio-Tag verwendet habe, können Sie diesen Link check out. Es sind nur 2 zusätzliche Zeilen mit selbsterklärendem Code.