脚本宝典收集整理的这篇文章主要介绍了angular4 上传本地图片,将拿到的files转化为url地址,提示sanitizing unsafe URL value,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
最近用Angular4做项目,上传图片时在onchange里面拿到files文件,将files文件转化为url地址显示的时候,发现console里面报错,同时angular4提示WARNING: sanITizing unsafe URL value,最后在谷歌找到解决办法。下面附上我的代码截图。
@H_126_5@
<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上面了。
以上是脚本宝典为你收集整理的angular4 上传本地图片,将拿到的files转化为url地址,提示sanitizing unsafe URL value全部内容,希望文章能够帮你解决angular4 上传本地图片,将拿到的files转化为url地址,提示sanitizing unsafe URL value所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。