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

问题描述

浏览器不会获取本地磁盘的完整路径，而是将文件名与假路径连接起来.有没有办法使用 typescript 或 angular 2 从 fakepath 访问文件(图像)?

Browsers don't take full path of local disc, instead they concatenate the filename with fakepath. Is there any way to access the file (image) from fakepath using typescript or angular 2?

我有这个:

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

我的路径变量在哪里存储 'fakepath':"C:fakepathpic.jpg" 在我的 .ts 文件中.

where my path variable stores the 'fakepath':"C:fakepathpic.jpg" in my .ts file.

编辑这个问题讨论了从使用javascript的fakepath.如果Js可以，那么ts不一样吗?

EditThis question discusses the way to preview image file from fakepath using javascript. If it is possible with Js, then is it not the same in case of ts?

推荐答案

这应该可以满足您的需求:

This should do what you want:

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

这篇关于如何在 Angular 2/Typescript 中预览存储在假路径中的图片?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！