Question

作为我们应用程序的一部分，我们希望在服务器上实际可用之前预览用户正在上传的文件。要做到这一点，我尝试了几件事：

将文件直接指定给background-image样式属性。（两者都有url（）和没有）
使用URL.createObjectURL()生成blob，提供WARNING: sanitizing unsafe style value blob:http://localhost:4200/16db9654-3119-4d55-9b59-715c2d31b334 (see http://g.co/ng/security#xss).
- 在blob网址周围添加url()：WARNING: sanitizing unsafe style value url(blob:http://localhost:4200/86da46b1-5431-46d0-8757-13c75e09abc2) (see http://g.co/ng/security#xss).
使用DomSanitizer ERROR Error: Required a safe Style, got a URL直接清理blob网址
- 在模板url()
- 在清理url()

在这些中，实际上没有出现背景图像。我使用chrome inspecter检查了dom，并且在所有情况下都没有实际设置属性。

那么这样做的正确方法是什么？我在开始时有一个File实例。

Answer 1

HTML：

<input type='file' (change)="onAdd($event)">

<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" *ngIf="url">
    <img [src]="url">
</div>

输入脚本：

onAdd(event: any) {
        console.log(event);
        if (event.target.files && event.target.files[0]) {
            var reader = new FileReader();
            reader.onload = (event: any) => {
                this.slika = event.target.result;
            }
            reader.readAsDataURL(event.target.files[0]);
        }
    }

编辑：

将您的代码更改为：

public addFile(event: any) {
    if (event.target.files && event.target.files[0]) {
            var reader = new FileReader();
            reader.onload = (event: any) => {
                this.url = event.target.result;
            }
            reader.readAsDataURL(event.target.files[0]);
        }
  }

和此：

<input type="file" (change)="addFile($event)">

通过这些更改，它现在应该可以正常工作。

Angular：使用所选文件进行图像预览

1 个答案: