Anguar 2のフォームをリストファイルで送信してください

Question

入力タイプファイルを含むフォームをAngular 2で提出する方法はありますか？

私が含まれているフォームがあります。私がしたい、特定のフォルダにアップロードファイルの後

username firstname | lastname | email | url_files 

：私はフォームを送信し、同様にデータベース内のデータを保存したい

> username 
> first name 
> last name 
> email 
> list of files 

をURLを;で区切って保存します。

私は以前PrimeNGで作業していましたが、fileUploadにオーナーボタンがアップロードされているため、フォーム を送信する方法がわかりません。私は が終了した後に最後にフォームを作成します。

Answer 1

ような何か：

import {ChangeDetectionStrategy, Component, EventEmitter, forwardRef, Input, Output} from '@angular/core'; 
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; 

@Component({ 
    selector: 'file-uploader', 
    templateUrl: './file-uploader.component.html', 
    styleUrls: ['./file-uploader.component.scss'], 
    changeDetection: ChangeDetectionStrategy.OnPush, 
    providers: [ 
    { 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => FileUploaderComponent), 
    multi: true 
    } 
    ] 
}) 

export class FileUploaderComponent implements ControlValueAccessor { 
    @Input() info: any; 
    @Input() maxUploads = 1; 
    @Output() filesAdded: EventEmitter<any> = new EventEmitter<any>(); 

    public model: any[] = []; 

    constructor() {} 

    propagateChange = (_: any) => {}; 

    registerOnChange(fn:() => any) { 
    this.propagateChange = fn; 
    } 

    registerOnTouched() {} 

    writeValue(value: any) { 

    if (value !== undefined) { 
     this.model = value; 
    } 
    } 

    delete(): void { 
    this.model = []; 
    this.propagateChange(this.model); 
    } 

    /* Opens the file selection dialog 
    * 
    * @param {HTMLElement} input [the file input to activate] 
    * @returns {Void} 
    */ 
    toggleFileInput(input: HTMLElement): void { 
    input.click(); 
    } 

    /* Reads files added from a file input 
    * 
    * @param {Any} e [the event of the file adding, contains the files to be read] 
    * @returns {Void} 
    */ 
    readFiles(e: any): void { 

    // Don't start at 0 since we will be counting length of array which doesn't start at 0 
    let completed = 1; 

    const newFiles: any[] = []; 

    for (const file of e.target.files) { 

     const reader = new FileReader(); 

     reader.onload = (loaded: any) => { 

     newFiles.push({src: loaded.target.result, type: file.type}); 

     if (e.target.files.length === completed) { 

      this.filesAdded.emit({ 
      existingFiles: this.model, 
      newFiles: newFiles, 
      info: this.info 
      }); 
     } 

     completed++; 
     }; 

     reader.readAsDataURL(file); 
    }; 
    } 
} 

そして：

<file-uploader (filesAdded)="uploadFiles($event)"></file-uploader> 

そして、あなたは画像をアップロードしたい：

uploadFiles(event: any): void { 

    console.log(event.newFiles); // Contains the files 
    // Do api call or just update form value with the base64 file objects 
} 

はEDIT：

ファイルアップローダーテンプレート：

<div class="fu-wrapper"> 
    <button class="btn fu-toggle" [ngClass]="btnClasses" type="button" (click)="toggleFileInput(fileInput)"> 
    <ng-content></ng-content> 
    </button> 
    <input #fileInput type="file" class="fu-input" [(ngModel)]="files" [ngModelOptions]="{standalone: true}" multiple hidden (change)="readFiles($event)"> 
</div>