摘要:最近用做項目,上傳圖片時在里面拿到文件,將文件轉化為地址顯示的時候,發現里面報錯,同時提示,最后在谷歌找到解決辦法。下面附上我的代碼截圖。在組件里面引入內置的模塊我喜歡在構造器里面定義屬性將地址轉化為安全地址最后就可以把地址放入的上面了。
??最近用angular4做項目,上傳圖片時在onchange里面拿到files文件,將files文件轉化為url地址顯示的時候,發現console里面報錯,同時angular4提示WARNING: sanitizing unsafe URL value,最后在谷歌找到解決辦法。下面附上我的代碼截圖。
??html中使用input標簽
??在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上面了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92125.html
摘要:文章首發于藍鍋鍋博客主要是用到的接口,既然是的,所支持的瀏覽器我就不多說啦,老生常談的問題了,遠離,珍惜生命。目錄路徑為目錄路徑為文章首發于藍鍋鍋博客,歡迎交流,共同進步。 我們在開發系統時,處理圖片上傳是不可避免的,例如使用thinkphp的肯定很熟悉import(@.ORG.UploadFile);的上傳方式,今天我們來講一個使用html5 base64上傳圖片的方法。文章首發于藍...
摘要:文章首發于藍鍋鍋博客主要是用到的接口,既然是的,所支持的瀏覽器我就不多說啦,老生常談的問題了,遠離,珍惜生命。目錄路徑為目錄路徑為文章首發于藍鍋鍋博客,歡迎交流,共同進步。 我們在開發系統時,處理圖片上傳是不可避免的,例如使用thinkphp的肯定很熟悉import(@.ORG.UploadFile);的上傳方式,今天我們來講一個使用html5 base64上傳圖片的方法。文章首發于藍...
摘要:表示不一定是原生形式的數據。接口基于,繼承了的功能并將其擴展使其支持用戶系統上的文件。讀取操作完成的時候,會變成已完成,并觸發事件,同時屬性將包含一個格式的字符串編碼以表示所讀取文件的內容。 溫馨提示:這里除了一些幼稚的小組件啥也沒有溫馨提示-續:這是一個新的系列,寫一些實際開發中遇到的一些常用的功能,想法笨拙,代碼亂套 寫在前面 圖片上傳,作為web端一個常用的功能,在不同的項目中有...
閱讀 3319·2021-11-08 13:12
閱讀 2756·2021-10-15 09:41
閱讀 1451·2021-10-08 10:05
閱讀 3300·2021-10-08 10:04
閱讀 2102·2021-09-29 09:34
閱讀 2472·2019-08-30 15:55
閱讀 2979·2019-08-30 15:45
閱讀 2577·2019-08-29 14:17