如何使用blob值清除不安全的URL值

Question

我在Angular中遇到了这个清理URL错误，我见过很多解决方案，但我无法在我的场景中使用它们，这就是我问这个问题的原因。

这是我的功能：

@Input()
maxFileSize: number = 1000000;
public fileChangeEvent(fileInput: any) {
if (fileInput.target.files && fileInput.target.files[0]) {
const reader = new FileReader();
reader.onload = (e: any) => {
if (e.target.result) {
if (e.target.result.length < this.maxFileSize) {
this.value = e.target.result;
} else {
alert(`Logo size ${e.target.result.length} cannot exceed ${this.maxFileSize} bytes.`);
}
}
};
reader.readAsDataURL(fileInput.target.files[0]);
}
}

我已经尝试过这个.screditer.bypassSecurityTrustUrl(url(，但在我的情况下，fileInput.target.files[0]是一个blob，所以我在包装它时总是会遇到一个错误。

我在这样的视图中使用它：

<ng-container *ngIf="value">
<div class="input-group-append">
<div class="img-thumbnail">
<img src="{{value}}" alt="Preview" />
</div>
<button class="btn btn-danger btn-lg" type="button" (click)="clearLogo()">
<i class="fa fa-trash" aria-hidden="true"></i>
Delete
</button>
</div>
</ng-container>
enter code here

我也尝试过[src]="{{value}}"；，但这并不奏效。

我得到这个错误：

警告：清除不安全的URL值

请问我哪里搞错了？

Answer 1

我希望这能解决您的问题。

constructor(private sanitizer:DomSanitizer){...}
....

let file = event.target.files[0];
let blob = new Blob([file], { type: file.type });
let url = window.URL.createObjectURL(blob);

this.value = this.sanitizer.bypassSecurityTrustUrl(url);