如何在 Angular 2/Typescript 中预览存储在假路径中的图片？答案

【问题标题】：How to preview picture stored in the fake path in Angular 2/Typescript?如何在 Angular 2/Typescript 中预览存储在假路径中的图片？
【发布时间】：2016-12-28 17:25:18
【问题描述】：

浏览器不采用本地磁盘的完整路径，而是将文件名与 fakepath 连接起来。有没有办法使用 typescript 或 angular 2 从 fakepath 访问文件（图像）？

我有这个：

<img src="{{path}}" />

我的路径变量将 'fakepath':"C:\fakepath\pic.jpg" 存储在我的 .ts 文件中。

编辑 This 问题讨论了使用 javascript 从 fakepath 预览图像文件的方法。如果用Js可以，那么用ts不一样吗？

【问题讨论】：

我不明白这个问题。这个 Angular 或 typescript 有什么关系？
您链接的问题没有可接受的答案。此外，其他问题涉及上传文件并显示上传文件的路径。您是否也有上传的文件，或者您想直接从本地光盘显示该文件？

标签： angular typescript image-uploading

【解决方案1】：

这应该做你想做的：

<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: ProgressEvent) => {
      this.url = (<FileReader>event.target).result;
    }

    reader.readAsDataURL(event.target.files[0]);
  }
}

【讨论】：

谢谢。这工作得很好。你能解释一下代码中发生了什么吗？你看我是 Javascript 和打字稿的新手，这些代码的语法有点让人不知所措。
很高兴听到。学到了一些新东西。以前从未听说过假路径。
@GünterZöchbauer 这不起作用，我不知道它的发布版本。我在 Angular 2.3.1 上，它在这一行出错：this.url = event.target.result;当我在 reader.onload 方法中添加控制台日志时，我得到： { "isTrusted": true }
@user875139 将reader.onload = (event) 更改为reader.onload = (event:any) 为我工作。这似乎是 Angular 阅读器界面的问题。
@baj9032 那么您需要遍历event.target.files 中的所有条目，而不仅仅是event.target.files[0] 中的第一个条目

【解决方案2】：

添加到@GünterZöchbauer 的答案，这对我不起作用，直到我添加了这个：

reader.onload = function(e:any){
   this.url = e.target.result;
}

在添加“任何”之前，我收到了错误：

property 'result' does not exist on type 'eventtarget'

【讨论】：

这段代码不太可能工作。 function(e:any){ 应该是 (e:any) => { 否则 this 不会指向包含代码的类（这很可能是你想要的）。

【解决方案3】：

当您将事件更改为任何类型时，它会起作用。这样，Angular 就可以访问它的任何属性。

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

}

【讨论】：

【解决方案4】：

它正在工作

example.component.html

<input type="file" (change)="onFileChanged($event)" required />
<img [src]="imageShow" height="200"> <br/>

example.component.ts

imageShow: any= '';
onFileChanged(event) {
  this.file = event.target.files[0]
  var reader = new FileReader();
  reader.readAsDataURL(event.target.files[0]);
  reader.onload = (event) => {
   this.imageShow = (<FileReader>event.target).result;
 }

}

【讨论】：