时间戳

首页 > 解决方案 > 如何获取图像并在我的页面中显示 angular 6

angular - 如何获取图像并在我的页面中显示 angular 6

问题描述

我正在将上传器中的图像保存到数据库中，因此它对我来说非常完美，但问题是我是否想在我的网站上显示该图像，那么我该如何显示它们，并且图像路径也应该显示为src="http://www.example.com/image.png". 请给我任何示例/解决方案。

TS

imageUrl: string = "/assets/img/default-image.png";
  fileToUpload: File = null;
  constructor(private imageService: ImageUploadService) { }

  handleInputFile(file: FileList){
    this.fileToUpload = file.item(0);
    var reader = new FileReader();
    reader.onload = (event:any) => {
      this.imageUrl = event.target.result;
    }
    reader.readAsDataURL(this.fileToUpload);
  }

  OnSubmit(Caption,Image){
    this.imageService.postFile(Caption.value, this.fileToUpload).subscribe(
      data => {
        console.log("Done");
        Caption.value = "";
        Image.value = "";
      }
    );
  }

服务.Ts

postFile(caption: string, fileToUpload: File){
    const endpoint = 'http://localhost:3343/api/UploadImage';
    const formData: FormData = new FormData();
    formData.append("Image", fileToUpload, fileToUpload.name);
    formData.append("Caption", caption);
    return this.http.post(endpoint,formData);
  }

HTML

<form #imageForm="ngForm" (ngSubmit)="OnSubmit(Caption,Image)">
        <div class="input-field col s12">
          <input type="text" #Caption ngModel name="Caption" id="Caption">
          <label for="Caption">Caption</label>
        </div>
        <img [src]="imageUrl" style="width:200px;height:200px;">
        <input type="file" #Image accept="Image/*" (change)="handleInputFile($event.target.files)">
        <button class="btn waves-effect waves-light" type="submit">Submit
          <i class="material-icons right">send</i>
        </button>
      </form>

标签： angulartypescriptasp.net-web-apifile-uploadangular6

解决方案

我正在分享我的项目中的代码。在这个例子中，

我有一个 API 调用它customerNumber返回我的blob类型数据。然后我将这些数据从服务返回到我的组件，在我的组件端，我将该数据作为 blob 并Image使用this.createImageFromBlob函数将其转换为类型。最后，我通过在标签中使用imageToShow.photo变量在模板端显示该图像<img [src]="imageToShow.photo">。

我的 service.ts 方面，

  getCustomerImages(customerNumber: number, type: string): Observable<File> {
    let result: Observable<any> = this.http
      .get(`${this.apiBaseUrl}csbins/Customer/${customerNumber}/images`, { responseType: "blob" });
    return result;
  }

我的 component.ts 方面，

  getCustomerImages() {
    this.isImageLoading = true;
    this.getCustomerImagesSubscription = this.getCustomerService.getCustomerImages(this.refNo).subscribe(
      data => {
        this.createImageFromBlob(data);
        this.isImageLoading = false;
      },
      error => {
        this.isImageLoading = false;
      });
  }

并在您的组件中将 blob 转换为图像，

  createImageFromBlob(image: Blob) {
    let reader = new FileReader();
    reader.addEventListener("load",
      () => {
          this.imageToShow.photo = reader.result;
      },
      false);

    if (image) {
      if (image.type !== "application/pdf")
        reader.readAsDataURL(image);
    }
  }

和我的 template.html 方面，

          <ng-template [ngIf]="imageTypeShow">
              <ng-template [ngIf]="imageToShow.photo">
                  <img [src]="imageToShow.photo" class="img-thumbnail" *ngIf="!isImageLoading;">
              </ng-template>
          </ng-template>

如果您有任何不明白的地方，请随时询问。

推荐阅读