Question

浏览器不会采用本地光盘的完整路径，而是将文件名与伪路径连接起来。有没有办法使用typescript或angular 2？

从伪路径访问文件（图像）

我有这个：

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

我的路径变量存储＆＃39;伪路径＆＃39;：＆＃34; C：\ fakepath \ pic.jpg＆＃34;在我的.ts文件中。

修改 This问题讨论了使用javascript从fakepath预览图像文件的方法。如果可以使用Js，那么在ts的情况下它是不一样的吗？

Answer 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]);
  }
}

Answer 2

添加到@GünterZöchbauer回答，在我添加之前，这对我不起作用：

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

在添加'any'之前，我收到了错误：

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

Answer 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]);
}

}

Answer 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;
 }

}

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

4 个答案: