如何使用角度图像上传显示图像缩略图答案

【问题标题】：How to display image thumbnail using angular image upload如何使用角度图像上传显示图像缩略图
【发布时间】：2020-03-31 03:03:20
【问题描述】：

我正在使用 ng2-file-upload 来上传图片。一切正常，但在我选择图像后，它会显示选定的图像缩略图。

请查看我的 stackblitz Link

提前致谢

【问题讨论】：

请用代码更新您的答案，以便我们以最好的方式帮助您
你可以查看链接吗
我需要显示上传的图片缩略图

标签： javascript angular ng2-file-upload

【解决方案1】：

你可以看看这个demo可能对你有帮助

模板文件：

img 元素显示图像预览

<img [src]="previewImg" *ngIf="previewImg"/>

类文件：

URL.createObjectURL() 是一个静态方法，它创建一个 DOMString，其中包含一个表示参数中给定对象的 URL。

bypassSecurityTrustUrl 绕过安全并相信给定的值是一个安全样式的 URL，即可以在超链接或<img src> 中使用的值。

constructor(private sanitizer: DomSanitizer) {} // inject the DomSanitizer

 previewImg: SafeUrl;
 this.uploader.onAfterAddingFile = (file) => {
      console.log('***** onAfterAddingFile ******')
      this.previewImg = this.sanitizer.bypassSecurityTrustUrl((window.URL.createObjectURL(file._file)));;
 }

别忘了包含import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

【讨论】：

【解决方案2】：

当您的图像准备好时，使用FileReader 显示缩略图时的答案

import { Component, OnInit } from '@angular/core';

import {FileUploader} from 'ng2-file-upload';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  url = 'https://evening-anchorage-3159.herokuapp.com/api/';
  ready = false;
  thumb="";
  uploader = new FileUploader({
    url: this.url,
    maxFileSize: 1024 * 1024 * 1
    });
  name = 'Angular 5';

  ngOnInit() {
    this.uploader.onAfterAddingFile = (file) => {
      console.log('***** onAfterAddingFile ******')
      var image_file=file._file
      const reader = new FileReader();
     reader.addEventListener('load', () => {
      console.log(reader.result)
      this.ready=true;
      this.thumb=reader.result.toString();
    });
    reader.readAsDataURL(image_file);
    }

    this.uploader.onCompleteItem =  (item:any, response:any, status:any, headers:any) => {
      console.log('ImageUpload:uploaded:', item, status, response);
    };

    this.uploader.onCompleteAll = () => {
      console.log('******* onCompleteAll *********')
    }

    this.uploader.onWhenAddingFileFailed = (item: any, filter: any, options: any) => {
      console.log('***** onWhenAddingFileFailed ********')
    }
  }
}

您的 HTML 如下所示

<hello name="{{ name }}"></hello>

<p>Maximun allowed file size is 1MB</p>
<img [src]="thumb" *ngIf="ready"/>
<input type="file" ng2FileSelect [uploader]="uploader">


<button (click)="uploader.uploadAll()">Upload </button>

【讨论】：

非常感谢

【解决方案3】：

我得到了解决方案，

我已经在你的 https://stackblitz.com/edit/angular-ng2-file-upload 上测试过，试试这个它正在工作

 export class AppComponent implements OnInit  {
      url = 'https://evening-anchorage-3159.herokuapp.com/api/';

      uploader = new FileUploader({
        url: this.url,
        maxFileSize: 1024 * 1024 * 1
        });
      name = 'Angular 5';
      //added this two variable here
      imageUrlOfLogo:string='';
      logoFileNameFile?: File;
      ngOnInit() {
        // your own code here
      }
      // added this code here
      handleLogoFileInput(file: any) {
        var item = file.item(0);
        this.logoFileNameFile = file.item(0);
        var reader = new FileReader();
        reader.onload = (event: any) => {
            this.imageUrlOfLogo = event.target.result;
        }
        reader.readAsDataURL(this.logoFileNameFile as File);

    }
}

component.html

<p>Maximun allowed file size is 1MB</p>
  <img [src]="imageUrlOfLogo" style="width:50%; height:90px;" *ngIf="logoFileNameFile">
<input type="file" ng2FileSelect [uploader]="uploader" (change)="handleLogoFileInput($event.target.files)">


<button (click)="uploader.uploadAll()">Upload </button>

【讨论】：