最近在工作上要做一個新的 web app, 有一個功能是要上傳圖檔, 我想要讓使用者直接拖拉圖片之後就能顯示圖片的 thumbnail, 方法不只一種, 我選擇用 window.URL.createObjectURL 的方式來做, 產生一個 Blob 的連結, 當然是這個方法不支援 IE (IE10 沒測~不知道), 之後透過 AngularJS 的 ng-src 來顯示 thumbnail。
概念如下：
AngularJS 版本： 1.2.0rc
瀏覽器：Chrome
<img ng-src="{{thumbnail.url}}" />
$scope.thumbnail.url = window.URL.createObjectURL(file); // file 是透過拖拉方式取得的檔案物件
不過執行的時候噴了錯誤, 錯誤大致上是說我的連結屬於 unsafe, 是不安全的，上網查了一下發現在 1.2.0rc 加強了許多 $compile 安全性的 code, 在 breaking change 的部份有提到針對 image ng-src 有去做 sanitize, blob 的連結預設是會被濾掉了，所以我必須重新設定 $compile 對 img src 的 sanitize rule, 總之就是將 blob 連結格式加入白名單就對了。
在 angular 的 config 那設定：
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob):|data:image\//);
這樣就解囉~~
參考連結：
https://github.com/angular/angular.js/blob/master/CHANGELOG.md#breaking-changes
留言列表
