最近用angular4做專案,上傳圖片時在onchange裡面拿到files檔案,將files檔案轉化為url地址顯示的時候,發現console裡面報錯,同時angular4提示WARNING: sanitizing unsafe URL value,最後在谷歌找到解決辦法。下面附上我的程式碼截圖。
html中使用input標籤
<input #file2 type="file" id="logo" value="" name="file" accept="image/*" multiple [disabled]="isInput" />
在onchange裡面拿到files檔案
// 獲取圖片檔案
let files = this.files;
// 轉化為url
let imgurl = window.URL.createObjectURL(files[0]);
這時按照我以前用angular1的做法直接把這個地址繫結到img標籤上就可以預覽本地上傳的圖片,但是,angular4卻報了WARNING: sanitizing unsafe URL value,還好找到了解決辦法。
1:在元件裡面引入angular內建的StampComponent模組
import {StampComponent} from "../base/stamp/stamp.component";
2:我喜歡在構造器裡面定義屬性
constructor(private sanitizer:DomSanitizer) { }
3:將地址轉化為安全地址
let sanitizerUrl = self.sanitizer.bypassSecurityTrustUrl(imgurl);
最後就可以把地址放入img的src上面了。