Probleme mit unsicheren Bildpfaden bei Verwendung von Angular4

Dieser Artikel stellt Ihnen hauptsächlich die Lösung des Problems des unsicheren Bild-Upload-Vorschaupfads in Angular4 vor. Er bietet einen gewissen Referenz-Lernwert für alle, die ihn benötigen Lassen Sie uns unten gemeinsam lernen.

Vorwort

Als ich vor einiger Zeit an einem Projekt arbeitete, stieß ich auf ein Problem mit der Fähigkeit von AngularJS, Bildvorschau und -upload zu implementieren. In Angular4 tritt beim Hochladen und Auswählen einer lokalen Vorschau eines Bildes über input:file ein Fehler auf, wenn die über window.URL.createObjectURL erhaltene URL dem Quellcode des Bildes zugewiesen wird:

WARNING: sanitizing unsafe URL value

Wie unten beschrieben Hier ist eine Lösung:

HTML-Code:

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

Darunter ist die Änderungsmethode wird aufgerufen, nachdem jedes Bild ausgewählt wurde, und die Quelle des Bildes muss übergeben werden. In Form einer Attributbindung führt die Verwendung von Interpolationsausdrücken ebenfalls zu Fehlern

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 window.URL.createObjectURL generierte imgUrl über die bypassSecurityTrustUrl-Methode von Santizer zu übergeben, um sie in einen sicheren Pfad umzuwandeln.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Wie vue+springboot domänenübergreifende Single-Sign-On-Probleme implementiert (ausführliches Tutorial)

Details zu häufigen verwendete JavaScript-Kapselung von Werkzeugklassen (ausführliches Tutorial)

Einführung in die Quellcode-Eintragsdatei in Vue im Detail (ausführliches Tutorial)

Einführung mehrerer JavaScript-Codierungen im Detail Spezifikation (ausführliches Tutorial)

So implementieren Sie die Drag-Verifizierungscode-Funktion mit jQuery und vue

So implementieren Sie die E-Mail Prompt-Vervollständigungsfunktion in JS

Das obige ist der detaillierte Inhalt vonProbleme mit unsicheren Bildpfaden bei Verwendung von Angular4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!