Angular4實(shí)現(xiàn)圖片上傳預(yù)覽路徑不安全的問(wèn)題解決
前言
前一段時(shí)間做項(xiàng)目時(shí)，遇到一個(gè)問(wèn)題就是AngularJS實(shí)現(xiàn)圖片預(yù)覽和上傳的功能，在Angular4中，通過(guò)input:file上傳選擇圖片本地預(yù)覽的時(shí)候，通過(guò)window.URL.createObjectURL獲取的url賦值給image的src出現(xiàn)錯(cuò)誤：
WARNING: sanitizing unsafe URL value
下面介紹一下解決方法：
html代碼：
<input type="file" (change)="fileChange($event)" > <img [src]="imgUrl" alt="">
其中，change方法會(huì)在每次選擇圖片后調(diào)用，image的src必須通過(guò)屬性綁定的形式，使用插值表達(dá)式同樣會(huì)出錯(cuò)
ts代碼
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;
}
}
首先，引入DomSanitizer，然后在構(gòu)造器里面注入，最重要的就是把window.URL.createObjectURL生成的imgUrl通過(guò)santizer的bypassSecurityTrustUrl方法，將它轉(zhuǎn)換成安全路徑。
最后將生成的安全的url賦值給imgUrl，此時(shí)就沒有問(wèn)題了~
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了淺析webapp框架AngularUI的demo以及對(duì)demo的簡(jiǎn)單修改，需要的朋友可以參考下2014-12-12
ngrx是一套利用RxJS的類庫(kù)，下面這篇文章主要給大家介紹了關(guān)于Angular X中使用ngrx的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07
本文主要介紹AngularJs 指令的知識(shí)，這里整理了詳細(xì)的資料和簡(jiǎn)單示例代碼幫助大家學(xué)習(xí)理解應(yīng)用，有興趣的小伙伴可以參考下2016-09-09
這篇文章主要介紹了Angularjs處理頁(yè)面閃爍的解決方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
AngularJS中的Module類負(fù)責(zé)定義應(yīng)用如何啟動(dòng)，它還可以通過(guò)聲明的方式定義應(yīng)用中的各個(gè)片段。我們來(lái)看看它是如何實(shí)現(xiàn)這些功能的2015-12-12
這篇文章主要介紹了AngularJS中的模塊,文中講到了其應(yīng)用模塊和控制器模塊的例子,需要的朋友可以參考下2015-06-06
自定義Angular指令與jQuery實(shí)現(xiàn)的Bootstrap風(fēng)格數(shù)據(jù)雙向綁定的單選與多選下拉框
這篇文章主要介紹了自定義Angular指令與jQuery實(shí)現(xiàn)的Bootstrap風(fēng)格數(shù)據(jù)雙向綁定的單選與多選下拉框 的相關(guān)資料,需要的朋友可以參考下2015-12-12
如何編寫一個(gè)完整的Angular4 FormText 組件
本篇文章主要介紹了如何編寫一個(gè)完整的Angular4 FormText 組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
AngularJS 仿微信圖片手勢(shì)縮放的實(shí)例
這篇文章主要介紹了AngularJS 仿微信圖片手勢(shì)縮放的實(shí)例的相關(guān)資料,希望大家通過(guò)本文實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了angular2 NgModel模塊的具體使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04