微客导航 » 文章资讯 » Angular4实现图片上传预览路径不安全的问题解决

Angular4实现图片上传预览路径不安全的问题解决

2023-09-18 20:26:05 309

前言

前一段时间做项目时，遇到一个问题就是AngularJS实现图片预览和上传的功能，在Angular4中，通过input:file上传选择图片本地预览的时候，通过window.URL.createObjectURL获取的url赋值给image的src出现错误：

WARNING:sanitizingunsafeURLvalue

下面介绍一下解决方法：

html代码：

其中，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']
})
exportclassAppComponentimplementsOnInit{
imgUrl;
constructor(
privatesanitizer:DomSanitizer
){}
ngOnInit(){}
fileChange(event){
letfile=event.target.files[0];
letimgUrl=window.URL.createObjectURL(file);
letsanitizerUrl=this.sanitizer.bypassSecurityTrustUrl(imgUrl);
this.imgUrl=sanitizerUrl;
}
}

首先，引入DomSanitizer，然后在构造器里面注入，最重要的就是把window.URL.createObjectURL生成的imgUrl通过santizer的bypassSecurityTrustUrl方法，将它转换成安全路径。

最后将生成的安全的url赋值给imgUrl，此时就没有问题了~

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。

返回顶部
3162201930
czq8825@qq.com

Angular4实现图片上传预览路径不安全的问题解决

热门推荐

随机推荐