如何使用 Typescript 和 Angular 4 显示图像

Posted 2023-03-13

【中文标题】如何使用 Typescript 和 Angular 4 显示图像

【英文标题】：How can I display an image using Typescript and Angular 4

【发布时间】：2018-04-14 12:02:58

【问题描述】：

我对打字稿和网络开发很陌生，所以如果我的代码很糟糕，我很抱歉。无论如何，我在为个人资料图片上传显示“预览图像”时遇到问题。我正在使用 ng2-file-upload 将我的图像上传到服务器，并且该部分工作正常。在我点击上传按钮之前，我想在页面上显示选中的图片。目前我正在尝试通过从 htmlImageElement 检索 src 属性来显示图像，但 src 属性似乎为空。

import  Component, OnInit  from '@angular/core';
import   FileUploader  from 'ng2-file-upload/ng2-file-upload';

const URL = 'http://localhost:4200/api/upload';

@Component(
  selector: 'app-view-profile',
  templateUrl: './view-profile.component.html',
  styleUrls: ['./view-profile.component.css']
)
export class ViewProfileComponent implements OnInit 

  constructor()  
  public uploader: FileUploader = new FileUploader(url: URL, itemAlias: 'newProfilePicture');
  title: string;
  previewImage: any;
  tempImage: any;
  source: string;

  imagePreview(input) 
  
      document.getElementById("previewImage").style.display="block";
      
        console.log("Image is selected")
        this.previewImage = document.getElementById("previewImage");
        console.log(this.previewImage);
        
        this.source = (<HTMLImageElement>document.getElementById('previewImage')).src
        console.log("Image Source: " + this.source + " Should be inbetween here");
        
      
      //var reader = new FileReader();
        
        //console.log(this.previewImage);
      
  

  ngOnInit() 
  	this.title = 'View or Update Your Profile';
  	this.uploader.onAfterAddingFile = (file)=> file.withCredentials = false;;
  	this.uploader.onCompleteItem = (item:any, response:any, status:any, headers:any) => 
        console.log("ImageUpload:uploaded:", item, status, response);
    //this.imagePreview();


    ;
  

这是我的 HTML

<div class="container">
    <h1>title</h1>

    <div>

        <input type="file" id="previewImage" (change)="imagePreview(this);" name="newProfilePicture" ng2FileSelect [uploader] ="uploader" />
        <button type="button" class="btn btn-success btn-s" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
          Upload Your File
        </button>
    </div>
</div>

【问题讨论】：

它是重复的。 ***.com/questions/4459379/…

并非如此。他确实问过如何在 Typescript 和 Angular4 中做到这一点。

【参考方案1】：

您可以通过这个简单的功能实现这一点：

模板：

<img [src]="url" > <br/>
<input type='file' (change)="onSelectFile($event)">

组件：

onSelectFile(event)  // called each time file input changes
    if (event.target.files && event.target.files[0]) 
      var reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]); // read file as data url

      reader.onload = (event) =>  // called once readAsDataURL is completed
        this.url = event.target.result;
      
    

这是它的工作示例，请查看：

WORKING DEMO

【讨论】：

@Kenny Ho，您能接受并投票给答案吗？

@VivekDoshi 我得到了error TS2339: Property 'result' does not exist on ty pe 'EventTarget'.，这是 onSelectFile(event) this.url = event.target.result; 中的这一行，如果我将其更改为任何内容，ng cli 将成功自动重新编译。重复将创建返回错误。有什么想法吗？

Jeb50 将<File> 添加到event.target.files 和event.target.files[0]

我使用过这段代码，但对我来说它可以工作，但在 reader.onload = (event) [tslint] 有两个问题.person.photo = event.target.result //“EventTarget”类型上不存在属性“result”

关于TS错误，不用event.target.result，直接用reader.result即可

【参考方案2】：

模板：

<input type='file' (change)="readUrl($event)">
<img [src]="url">

组件：

 readUrl(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]);
      
 

试过了，没有任何错误。

【讨论】：

我使用了这段代码，但它显示了一个错误 reader.onload = (event:any) // event Shadowed name: 'event' (no-shadowed-variable)