angular4 上傳本地圖片,將拿到的files轉化爲url地址,提示sanitizing unsafe URL value

  最近用angular4作項目,上傳圖片時在onchange裏面拿到files文件,將files文件轉化爲url地址顯示的時候,發現console裏面報錯,同時angular4提示WARNING: sanitizing unsafe URL value,最後在谷歌找到解決辦法。下面附上個人代碼截圖。javascript

  html中使用input標籤html

<input #file2 type="file" id="logo" value="" name="file" accept="image/*" multiple [disabled]="isInput" />
複製代碼

  在onchange裏面拿到files文件java

// 獲取圖片文件
let files = this.files;
// 轉化爲url
let imgurl = window.URL.createObjectURL(files[0]);
複製代碼

  這時按照我之前用angular1的作法直接把這個地址綁定到img標籤上就能夠預覽本地上傳的圖片,可是,angular4卻報了WARNING: sanitizing unsafe URL value,還好找到了解決辦法。安全

1:在組件裏面引入angular內置的StampComponent模塊angular4

import {StampComponent} from "../base/stamp/stamp.component";
複製代碼

2:我喜歡在構造器裏面定義屬性ui

constructor(private sanitizer:DomSanitizer) { }
複製代碼

3:將地址轉化爲安全地址this

let sanitizerUrl = self.sanitizer.bypassSecurityTrustUrl(imgurl);
複製代碼

  最後就能夠把地址放入img的src上面了。url

相關文章
相關標籤/搜索