web-dev-qa-db-ja.com

angular反応性フォームを使用した複数ファイルのアップロード

Angular 6でフォームを作成しようとしています。これは、ユーザーが複数のファイルを選択できるファイル選択ボックスを提供します（Stackblitz： https://stackblitz.com/edit/ angular-yjummp ）。

テンプレートは次のようになります。

<form [formGroup]="form">
    <input id="files" formControlName="files" type="file" accept="image/*,video/*" multiple (change)="onFilesChanged($event)"/>
</form>

TypeScriptでフォームを次のように構築しています。

  public form = new FormGroup({
    files: new FormControl('')
  });

  public onFilesChanged(event: any): void {
    console.log(event.target.files);
    console.log(this.form.value);
  }

これで、onFilesChangedハンドラーで、選択したファイルをevent.target.filesにアクセスして（当然）イベントから正しく取得できますが、フォームの値を印刷すると1つのファイルしか印刷されません。私もFormArrayを使用していくつかの方法を試してきましたが、今のところうまくいきませんでした。

何か案は？どうもありがとう！

angularfile-upload
6
Maximilian Zellhofer

以下は、angular反応性フォームを通じて複数の写真アップロード入力ファイルを作成した方法の例です。

public demoForm: FormGroup;

constructor(private formBuilder: FormBuilder) { 
    this.demoForm = this.formBuilder.group({
       text_input: ['', Validators.required],
       photos: this.formBuilder.array([])
    });
}

// We will create multiple form controls inside defined form controls photos.
createItem(data): FormGroup {
    return this.formBuilder.group(data);
}

//Help to get all photos controls as form array.
get photos(): FormArray {
    return this.roomForm.get('photos') as FormArray;
};

detectFiles(event) {
    let files = event.target.files;
    if (files) {
        for (let file of files) {
            let reader = new FileReader();
            reader.onload = (e: any) => {
                this.photos.Push(this.createItem({
                    file,
                    url: e.target.result  //Base64 string for preview image
                }));
            }
            reader.readAsDataURL(file);
        }
    }
}

コンポーネントhtml

<input type="file" class="custom-file-input form-control" id="files" multiple (change)="detectFiles($event)" accept="image/x-png,image/jpeg">

<div class="images-preview mt-2" *ngIf="photos.length">
    <div formArrayName="photos" *ngFor="let photo of photos.controls; let i = index;">
        <div [formGroupName]="i">
            <img [src]="photo.controls.url.value" class="card-img-top" alt="Image Preview">
        </div>
    </div>
</div>

プレビューを表示したくない場合は、htmlを回避できます。フォームを送信すると、以下のような値が取得されます。

{
    text_input: "",
    photos: [
       {
           file: <File Object>,
           url: <Base64 String here>
       },
       {
           file: <File Object>,
           url: <Base64 String here>
       },
       ....
    ] 
}

あなたや他の人々にも役立つことを願っています。ありがとう。

2
Javascript Hupp Technologies