Question

上传图像时，我想显示图像及其路径的预览（例如../assets/dist/upload/profil-sfgho91563005701768.jpg）。

模板HTML看起来像这样：

<div>
    <label class="btn btn-default">
        <input type="file" (change)="selectFile($event)">
    </label>

    <button class="btn btn-success"
            [disabled]="!selectedFiles"
            (click)="upload()">
        Upload
    </button>

    <br/>
    <img src="{{displayImage()}}" style="max-width:30px"/>
    <br/>

    {{displayImage()}}
</div>

component.ts如下：

selectFile(event) {
  const file = event.target.files.item(0)

  if (file.type.match('image.*')) {
    this.selectedFiles = event.target.files;
  } else {
    alert('invalid format!');
  }
}

upload() {
  this.progress.percentage = 0;
  this.currentFileUpload = this.selectedFiles.item(0);

  this.userService.pushFileToStorage(this.currentFileUpload)
    .subscribe(event => {
      if (event.type === HttpEventType.UploadProgress) {
        this.progress.percentage = Math.round(100 * event.loaded / event.total);
      } else if (event instanceof HttpResponse) {
        console.log('File is completely uploaded!');
      }
    })

  sessionStorage.getItem("fullNameFile");

  this.currentSelectedFile = "../assets/dist/upload/" + sessionStorage.getItem("fullNameFile");
  this.selectedFiles = undefined;
}


displayImage(): String {
  this.pathImage = "../assets/dist/upload/" + sessionStorage.getItem("fullNameFile");
  return this.pathImage;
}

As seen in this screenshot，每次上传后产生的路径都是正确的。

但是无法显示图像。但是，当我将此网址放在src（<img src="../assets/dist/upload/profil-mu1os1563004878566.jpg" style="max-width:30px"/>）上时，效果很好。

我该如何解决这个问题？

非常感谢。

Answer 1

这是因为img在上传之前找不到图像。您需要先上传图片，然后在完成后显示img。

您可以创建一个showImg变量，然后在订阅并显示图像时将其设置为true。

模板HTML：

<div>
    <label class="btn btn-default">
        <input type="file" (change)="selectFile($event)">
    </label>

    <button class="btn btn-success"
            [disabled]="!selectedFiles"
            (click)="upload()">
        Upload
    </button>

    <div *ngIf={{showImg}}>
        <img src="{{displayImage()}}" style="max-width:30px"/>
        {{displayImage()}}
    </div>
</div>

component.ts：

showImage: boolean = false;

...

upload() {
  this.showImage = false;
  this.progress.percentage = 0;
  this.currentFileUpload = this.selectedFiles.item(0);

  this.userService.pushFileToStorage(this.currentFileUpload)
    .subscribe(event => {
      if (event.type === HttpEventType.UploadProgress) {
        this.progress.percentage = Math.round(100 * event.loaded / event.total);
      } else if (event instanceof HttpResponse) {
        console.log('File is completely uploaded!');

        this.showImage = true;

        sessionStorage.getItem("fullNameFile");
        this.currentSelectedFile = "../assets/dist/upload/" +  sessionStorage.getItem("fullNameFile");
        this.selectedFiles = undefined;
      }
    })
}

...

Answer 2

尝试：

url: string | ArrayBuffer;

selectFile(event:any)
    {
        if (event.target.files && event.target.files[0])
        {
            var reader = new FileReader();

            reader.onload = (event: ProgressEvent) =>
            {
                this.url = (<FileReader>event.target).result;
            }
            reader.readAsDataURL(event.target.files[0]);
        }

        const file = event.target.files.item(0)

        if (file.type.match('image.*'))
        {
            this.selectedFiles = event.target.files;
        }
        else
        {
            alert('invalid format!');
        }
    }

然后在html上尝试：

<img [src]="url" style="max-width:30px">

HTH。

无法显示路径正确的上传图像

2 个答案: