Angular圖片上傳預覽路徑問題的解決

來源：懂視網責編：小采時間：2020-11-27 19:55:30

Angular圖片上傳預覽路徑問題的解決

Angular圖片上傳預覽路徑問題的解決:這次給大家?guī)鞟ngular圖片上傳預覽路徑問題的解決，解決Angular圖片上傳預覽路徑問題的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。前言前一段時間做項目時，遇到一個問題就是AngularJS實現(xiàn)圖片預覽和上傳的功能，在Angular4中，通過input:

推薦度：

點擊下載本文 文檔為doc格式

導讀Angular圖片上傳預覽路徑問題的解決:這次給大家?guī)鞟ngular圖片上傳預覽路徑問題的解決，解決Angular圖片上傳預覽路徑問題的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。前言前一段時間做項目時，遇到一個問題就是AngularJS實現(xiàn)圖片預覽和上傳的功能，在Angular4中，通過input:

這次給大家?guī)鞟ngular圖片上傳預覽路徑問題的解決，解決Angular圖片上傳預覽路徑問題的注意事項有哪些，下面就是實戰(zhà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方法會在每次選擇圖片后調用，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，然后在構造器里面注入，最重要的就是把window.URL.createObjectURL生成的imgUrl通過santizer的bypassSecurityTrustUrl方法，將它轉換成安全路徑。

最后將生成的安全的url賦值給imgUrl，此時就沒有問題了~

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！