前言
前一段时间做项目时，遇到一个问题就是angularjs实现图片预览和上传的功能，在angular4中，通过input:file上传选择图片本地预览的时候，通过window.url.createobjecturl获取的url赋值给image的src出现错误：
warning: sanitizing unsafe url value
下面介绍一下解决方法：
html代码：
<input type="file" (change)="filechange($event)" > <img [src]="imgurl" alt="">
其中，change方法会在每次选择图片后调用，image的src必须通过属性绑定的形式，使用插值表达式同样会出错
ts代码
我要评论
import { component, oninit } from '@angular/core';
import { domsanitizer } from '@angular/platform-browser'
@component({
selector: 'my-app',
templateurl: './app.component.html',
styleurls: ['./app.component.css']
})
export class appcomponent implements oninit {
imgurl;
constructor(
private sanitizer: domsanitizer
){}
ngoninit() { }
filechange(event){
let file = event.target.files[0];
let imgurl = window.url.createobjecturl(file);
let sanitizerurl = this.sanitizer.bypasssecuritytrusturl(imgurl);
this.imgurl = sanitizerurl;
}
}
首先，引入domsanitizer，然后在构造器里面注入，最重要的就是把window.url.createobjecturl生成的imgurl通过santizer的bypasssecuritytrusturl方法，将它转换成安全路径。
最后将生成的安全的url赋值给imgurl，此时就没有问题了~
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。
如对本文有疑问， 点击进行留言回复！！
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存（路由）组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论