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

来源：动视网责编：小采时间：2020-11-27 22:23:07

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

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

推荐度：

点击下载本文 文档为doc格式

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

前言

前一段时间做项目时，遇到一个问题就是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" ">

其中，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，此时就没有问题了~

总结

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

推荐度：

点击下载本文 文档为doc格式

标签：上传上传的实现图片预览

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐