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

前言

前一段时间做项目时，遇到一个问题就是AngularJS实现图片预览和上传的功能，在Angular4中，通过

input:file

window.URL.createObjectURL

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

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

总结

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

您可能感兴趣的文章:

• angularjs客户端实现压缩图片文件并上传实例
• 通过AngularJS实现图片上传及缩略图展示示例
• Angular下H5上传图片的方法（可多张上传）
• AngularJs上传前预览图片的实例代码
• angularjs实现多张图片上传并预览功能
• angularjs点击图片放大实现上传图片预览
• angular2+nodejs实现图片上传功能
• Angularjs上传图片实例详解
• Angularjs实现上传图片预览功能
• AngularJS实现图片上传和预览功能的方法分析