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

Question

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

我有这个：

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

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

编辑 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 如何预览存储在假路径中的图片？

How to preview picture stored in the fake path in Angular 2/Typescript?

image-uploading

typescript

angular