HTML5技术

Angular4图片上传预览路径不安全问题 - LiuDongpei

字号+ 作者:H5之家 来源:H5之家 2017-12-13 17:24 我要评论( )

在Angular4中,通过input:file上传选择图片本地预览的时候,通过window.URL.createObjectURL获取的url赋值给image的src出现错误: WARNING: sanitizing unsafe URL value 下面介绍一下解决方法: html代码: input type="file" (change)="fileChange($event)

在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,此时就没有问题了~

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 移动前端图片压缩上传 - 李某龙

    移动前端图片压缩上传 - 李某龙

    2017-12-06 08:12

  • 【echarts】 tooltip显示图片 - ~哎呀

    【echarts】 tooltip显示图片 - ~哎呀

    2017-10-25 16:19

  • [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPatter

    [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,crea

    2017-09-30 10:01

  • 解决html5 canvas 绘制字体、图片与图形模糊问题 - fyter

    解决html5 canvas 绘制字体、图片与图形模糊问题 - fyter

    2017-09-20 14:33

网友点评