Angular4实现图片上传预览路径不安全的问题解决
程序员文章站
2024-01-18 13:17:04
前言
前一段时间做项目时,遇到一个问题就是angularjs实现图片预览和上传的功能,在angular4中,通过input:file上传选择图片本地预览的时候,通过win...
前言
前一段时间做项目时,遇到一个问题就是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,此时就没有问题了~
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
推荐阅读