Heim > Artikel > Web-Frontend > 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.
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!