이번에는 Angularpictureupload의 미리보기 경로 문제에 대한 해결책을 가져왔습니다. Angular 사진 업로드 미리보기 경로 문제를 해결하기 위한 주의사항은 무엇입니까? 실제 사례를 살펴보겠습니다. .
머리말
얼마 전 프로젝트를 진행하면서 AngularJS에서 이미지 미리보기 및 업로드 기능을 구현하는 문제에 직면했습니다. Angular4에서 input:file
을 통해 로컬 미리보기용 이미지를 업로드하고 선택할 때, window.URL.createObjectURL을 사용하여 이미지의 src에 얻은 URL을 할당하는 중 오류가 발생했습니다.: 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
경고: 안전하지 않은 URL 값 삭제
html 코드: rrreee
그 중 각 이미지가 선택된 후 변경 메소드가 호출됩니다. 이미지의 src는 Expression
window.URL.createObjectURL
에서 생성된 imgUrl을 🎜safe🎜경로로 변환하는 것입니다. 🎜🎜
마지막으로 생성된 보안 URL을 imgUrl에 할당하면 문제가 없습니다~🎜🎜이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어의 다른 관련 기사를 주목하세요. 웹사이트! 🎜🎜추천 자료: 🎜🎜🎜AngularJS는 가격 계산 기능을 구현합니다🎜🎜🎜🎜🎜Webpack이 Electron 애플리케이션을 구축하는 방법🎜🎜🎜🎜위 내용은 Angular 이미지 업로드 미리보기 경로 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!