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