angular4 上传本地图片,将拿到的files转化为url地址,提示sanitizing unsafe URL value

  最近用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上面了。

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...