web-dev-qa-db-ja.com

Angular 2 / Typescriptの偽のパスに保存されている画像をプレビューする方法は？

ブラウザはローカルディスクのフルパスを使用せず、代わりにファイル名とfakepathを連結します。 TypeScriptまたはangular 2を使用して、fakepathからファイル（イメージ）にアクセスする方法はありますか？

私はこれを持っています：

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

ここで、私のパス変数は.tsファイルに 'fakepath'： "C：\ fakepath\pic.jpg"を格納します。

EditThis 質問では、javascriptを使用してfakepathから画像ファイルをプレビューする方法について説明しています。 Jsで可能であれば、tsの場合と同じではありませんか？

angulartypescriptimage-uploading
36
Karan Desai

これはあなたが望むことをするはずです：

<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]);
  }
}
91
Günter Zöchbauer

@GünterZöchbauerの答えに加えて、これを追加するまでこれはうまくいきませんでした：

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

「any」を追加する前に、エラーが発生していました。

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

イベントを任意のタイプに変更すると機能します。そのようにして、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
Ifesinachi Bryan

動いている

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

}

2
Sunil Manipara