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