Angular4實(shí)現(xiàn)圖片上傳預(yù)覽路徑不安全的問題解決
前言
前一段時(shí)間做項(xiàng)目時(shí)，遇到一個(gè)問題就是AngularJS實(shí)現(xiàn)圖片預(yù)覽和上傳的功能，在Angular4中，通過input:file上傳選擇圖片本地預(yù)覽的時(shí)候，通過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必須通過屬性綁定的形式，使用插值表達(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通過santizer的bypassSecurityTrustUrl方法，將它轉(zhuǎn)換成安全路徑。
最后將生成的安全的url賦值給imgUrl，此時(shí)就沒有問題了~
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
AngularJS 與Bootstrap實(shí)現(xiàn)表格分頁(yè)實(shí)例代碼
這篇文章主要介紹了AngularJS 與Bootstrap實(shí)現(xiàn)表格分頁(yè)的相關(guān)資料,并附實(shí)例代碼和實(shí)現(xiàn)效果圖，需要的朋友可以參考下2016-10-10
ionic4+angular7+cordova上傳圖片功能的實(shí)例代碼
ionic是一個(gè)垮平臺(tái)開發(fā)框架，可通過web技術(shù)開發(fā)出多平臺(tái)的應(yīng)用。這篇文章主要介紹了ionic4+angular7+cordova上傳圖片功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06
詳解Angular-ui-BootStrap組件的解釋以及使用
這篇文章主要介紹了詳解Angular-ui-BootStrap組件的解釋以及使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
最近在angular的項(xiàng)目，但是我用直接引用百度地圖的方法引進(jìn)js,寫html,js代碼，發(fā)現(xiàn)報(bào)錯(cuò)，接下來通過本文給大家介紹angular和百度地圖的結(jié)合,需要的朋友可以參考下2016-10-10
$scope 的使用貫穿整個(gè) Angular App 應(yīng)用,它與數(shù)據(jù)模型相關(guān)聯(lián),同時(shí)也是表達(dá)式執(zhí)行的上下文.有了 $scope 就在視圖和控制器之間建立了一個(gè)通道,基于作用域視圖在修改數(shù)據(jù)時(shí)會(huì)立刻更新 $scope,同樣的 $scope 發(fā)生改變時(shí)也會(huì)立刻重新渲染視圖.2016-08-08
Spartacus CMS Feature selector的實(shí)現(xiàn)解析
這篇文章主要為大家介紹了Spartacus CMS Feature selector的實(shí)現(xiàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
Angular異步執(zhí)行學(xué)習(xí)之zone.js使用
這篇文章主要為大家介紹了Angular異步執(zhí)行學(xué)習(xí)之zone.js使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
路由是實(shí)現(xiàn)單頁(yè)面應(yīng)用的一種方式,通過監(jiān)聽hash或者h(yuǎn)istory的變化,渲染不同的組件,起到局部更新的作用,避免每次URL變化都向服務(wù)器請(qǐng)求數(shù)據(jù),本文給大家介紹Angular 中的路由,感興趣的朋友一起看看吧2023-11-11
angularJs使用ng-repeat遍歷后選中某一個(gè)的方法
今天小編就為大家分享一篇angularJs使用ng-repeat遍歷后選中某一個(gè)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Angular ui.bootstrap.pagination分頁(yè)
這篇文章主要為大家詳細(xì)介紹了Angular ui.bootstrap.pagination 分頁(yè)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01