角度2のファイルアップロードサンプル

Question

角度2を使用する場合、そのような機能の基本を伝える簡単なファイルアップロードサンプルを共有できますか？

私が行った研究（やっている）は、古いバージョンのAngularをバブリングし続けます。この時点で、私がしようとしているのは、小さな画像ファイルをプロパティまたはローカルストレージにロードし、それをWebページに表示させることです。

私はAnglet 2を初めて使っているので、HttpClientを使用することを想像していますが、簡単なサンプルに頼らずにこの仕組みがどのように始まっているのかは分かりません。

私はこれを試していますが、私が期待していた効果はありません。それは私が輸入を逃しているように感じる。この部分はレンダリングされたイメージではなくファイルの名前を取得しようとしています。 [（ngModel）]はオプションではないようです。選択したファイルを取得するには、イベントを変更する必要があります。

コンポーネント

@Component({ 
    selector:'home-page' 
    ,templateUrl:'./home.page.html' 
}) 
export class HomePageComponent{ 
    CurrentFile:File; 
    public FileChangeEvent(fileInput:any){ 
     this.CurrentFile = fileInput.target.files[0]; 
    } 
} 

HTML

<div> 
    <input type="file" (change)="FileChangeEvent($event)"> 
    <div *ngIf="CurrentFile"> 
     <p>{{CurrentFile.name}}</p> 
    </div> 
</div> 

Answer 1

荒れ果てた後、私は裸の基礎と考えることができると思っています。画像が選択されていないとき、ページが読み込まれていてファイルが不明であるときを除いて、何も処理しようとする試みはありません。

コンポーネント

@Component({ 
    selector:'home-page' 
    ,templateUrl:'./home.page.html' 
}) 
export class HomePageComponent{ 
    CurrentFile:File; 
    ImageSource:string; 

    public FileChangeEvent(fileInput:any){ 
     this.CurrentFile = fileInput.target.files[0]; 

     let reader = new FileReader(); 
     reader.onload =() => { 
       this.ImageSource = reader.result; 
      }; 
     reader.readAsDataURL(this.CurrentFile); 
    } 
} 

あなたはあなたのサーバーにファイルをアップロードするには、この答えを使用することができます

<div> 
    <input type="file" (change)="FileChangeEvent($event)"> 
    <div *ngIf="CurrentFile"> 
     <img [src]="ImageSource"> 
    </div> 
</div> 

Answer 2

あなたは角度2でファイルをアップロードすることが必要なすべて：

https://github.com/valor-software/ng2-file-upload

Answer 3

HTML：

https://stackoverflow.com/a/40216616/5413117

たとえば、それを紺色にアップロードして、紺色のストレージリンクを介して画像を表示することができます。

ファイルを使用して取り除くしたい場合は、イベントを変更し、それが動作するものの、ファイル入力の制御値アクセサを書くことができ、ここで説明：

https://stackoverflow.com/a/41938495/5413117