Question

我有一个页面，您可以上传图像。一切正常，除了我不知道如何使用成功时在json响应中返回的新图像刷新页面。我无法使用location.reload()因为它会刷新整个应用程序并从主页开始。我正在使用angular2 / typescript作为我的前端

component.ts（成功时返回图像值）

uploadFile(): any {
    let file = this.fileInput.nativeElement;
    if (file.files && file.files[0]) {
        let fileToUpload = file.files[0];
        this.getService
            .uploadImg(fileToUpload)
            .subscribe(
                response => {
                },
                err => {
                    console.log("ERR", err)
                }
            },
            () => console.log("Success")
    );
}

Answer 1

我的解决方案是更新src容器的img属性。这可以使用setAttribute函数完成。一个原始的例子如下。

的Javascript

uploadFile(): any {
let file = this.fileInput.nativeElement;
if (file.files && file.files[0]) {
    let fileToUpload = file.files[0];
    this.getService
        .uploadImage(fileToUpload, this.id)
        .subscribe(
            response => {
                this.image = response.image;
                document.getElementbyId("image-id").setAttribute("src", "data:image/JPG;base64," + pic.pic );
            },
            err => {
                console.log("ERR", err)
            }
        },
        () => console.log("Success")
    );
}

HTML

<div *ngIf="pic.pic">
    <img id="image-id" [src]="'data:image/JPG;base64,' + pic.pic" />
</div>

Answer 2

这是我如何解决它的。 component.ts（成功时返回图像值）

pic: any;
upload: any {
    let file = this.fileInput.nativeElement;
    if (file.files && file.files[0]) {
        let fileToUpload = file.files[0];
        this.getService
            .uploadImg(fileToUpload)
            .subscribe(
                response => {
                    //Assign the response here 
                    this.pic = response.image;
                },
                err => {
                    console.log("ERR", err)
                }
            },
            () => console.log("Success")
    );
}

html页面

    <img [src]="'data:image/JPG;base64,' + pic " />

上传

2 个答案: