ファイル入力コントロールはイメージパスの配列を配列にバインドし、ngforループで表示しますか？

Question

私は、ファイル入力コントロールから複数のファイルを取得し、それらのファイルを繰り返してそのパスを取得し、それらを配列に格納する方法を試していました。ここで複数のファイルをすべて表示したかったのが私のコードです。

pictureschanged(input: any) { 
    const fileList = input.target.files; 
    this.testimage = this.sanitization.bypassSecurityTrustResourceUrl(input.target.value) ; 
    console.log(this.testimage); 
    if (fileList != undefined) { 
     this.imageColllection = fileList; 
     this.imageCount = fileList.length; 
     let arr = []; 
     for (let i = 0; i < this.imageColllection.length; i++) { 
     let file = this.imageColllection[i]; 
     var reader = new FileReader(); 
     reader.onload = this.uploadImage.bind(this); 
     // (e): void => { 
     // arr.push(e.target['result']); 
     // reader.readAsDataURL(file); 
     // } 
     } 
     console.log(this.imageColllection); 
     // reader.readAsDataURL(input.files[0]); 
     // var path = (window.URL).createObjectURL(fileList[key]); 
     // console.log(path); 
    } 
    } 

あなたは、私は彼らのパスを取得することができpicturechanged()方法でファイルを取得することができなくMと私は角度のパスを取得する場合は文句を言わないとlocalYそれを読み込む見るよう

<div class="form-group"> 
      <label for="" class="control-label col-sm-3"> 
      Upload picture: 
      </label> 
      <div class="col-sm-9"> 
      <div class="row"> 
       <div class="col-sm-2" *ngFor="let file of imageColllection"> 
       <div class="picture-holder"> 
        <img [src]="testimage" alt="" class="image-prop"> 
       </div> 
       </div> 
       <div class="col-xs-12" [ngClass]="{'col-xs-12':imageCount===0,'col-xs-10':imageCount===1,'col-xs-8':imageCount===2,'col-xs-8':imageCount===3}"> 
       <div class="dropZoneOverlay" (change)="pictureschanged($event)" #imageTemp> 
        <i class="glyphicon glyphicon-plus"> 
        </i> 
        <input type="file" multiple accept="image/*" class="control-custom FileUpload"> 
        <!-- <div *ngIf="Pictures.touched && Pictures.invalid"> 
        Please provide only 3 pictures 
       </div> --> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 

ここでの私のHTMLコード角度防ぐので、ローカルリソースが許可されていない、どのように私はその機能を達成することができます。次のタスクを行う必要があります

1）ファイルのパスを取得します。

2）これらのパスをimage srcプロパティにバインドします。

Answer 1

ここで、それはあなたがそれを達成することができますどのように、次のとおりです。

コンポーネント：

urls = []; 
onSelectFile(event) { 
    if (event.target.files && event.target.files[0]) { 
     var filesAmount = event.target.files.length; 
     for (let i = 0; i < filesAmount; i++) { 
       var reader = new FileReader(); 

       reader.onload = (event) => { 
        console.log(event.target.result); 
        this.urls.push(event.target.result); 
       } 

       reader.readAsDataURL(event.target.files[i]); 
     } 
    } 
} 

テンプレート：

<img *ngFor='let url of urls' [src]="url" height="200"> <br/> 

<input type='file' (change)="onSelectFile($event)" multiple> 

---

ここでは

作業のデモへのリンクです：

https://stackblitz.com/edit/angular-multi-file-upload-preview