Lösung des Problems des Angular-Bild-Upload-Vorschaupfads

Dieses Mal werde ich Ihnen die Lösung für das Angular-Problem bringenBildHochladen Vorschaupfad Es gibt Notizen, um das Problem zu lösen Schauen wir uns die folgenden praktischen Fälle an.

Vorwort

Als ich vor einiger Zeit an einem Projekt arbeitete, stieß ich auf ein Problem, das dazu führte, dass AngularJS die Funktion der Bildvorschau und des Hochladens in Angular4 beim Hochladen und Auswählen von Bildern für die lokale Vorschau über input:file implementierte erhalten durch window.URL.createObjectURL In der dem Bild zugewiesenen Quelle ist ein Fehler aufgetreten:

WARNING: sanitizing unsafe URL value

Hier sind die Lösungen:

HTML-Code:

<input type="file" (change)="fileChange($event)" >
<img [src]="imgUrl" alt="">

Unter anderem wird die Änderungsmethode aufgerufen, nachdem jedes Bild ausgewählt wurde. Die Quelle des Bildes muss in Form einer Attributbindung vorliegen. Die Verwendung des Interpolationsausdrucks führt ebenfalls zu einem Fehler

ts-Code

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser' 
@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit { 
 imgUrl;
 constructor(
 private sanitizer: DomSanitizer
 ){} 
 ngOnInit() { } 
 fileChange(event){
 let file = event.target.files[0];
 let imgUrl = window.URL.createObjectURL(file);
 let sanitizerUrl = this.sanitizer.bypassSecurityTrustUrl(imgUrl); 
 this.imgUrl = sanitizerUrl;
 }
}

Führen Sie zuerst DomSanitizer ein und fügen Sie es dann in den Konstruktor ein. Das Wichtigste ist, die von

generierte imgUrl über die bypassSecurityTrustUrl-Methode von Santizer in einen window.URL.createObjectURL sicheren -Pfad umzuwandeln.

Weisen Sie abschließend die generierte sichere URL zu imgUrl zu.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

AngularJS implementiert die Preisberechnungsfunktion

Wie Webpack Electron-Anwendungen erstellt

Das obige ist der detaillierte Inhalt vonLösung des Problems des Angular-Bild-Upload-Vorschaupfads. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!