Angular4 Datei hochladen mit fom Einreichung.?

Question

Dies ist meine Html-Datei

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)"> 
    <div class="row"> 
     <div class="col-md-12 col-12"> 

      <label>My name is</label> 
     </div> 

     <div class="col-md-12 col-12 q-row"> 
      <div class="form-group" [ngClass]="{'has-error':!complexForm.controls['name'].valid && complexForm.controls['name'].touched}"> 
       <input class="form-control" type="text" [formControl]="complexForm.controls['name']"> 
       <div *ngIf="complexForm.controls['name'].hasError('required') && complexForm.controls['name'].touched" class="invalid">Please provide your name.</div> 
      </div> 
     </div> 
    </div> 

    <input type="file" (change)="fileChanged($event)" name="file1" [formControl]="complexForm.controls['file1']"> 
    <input type="file" (change)="fileChanged($event)" name="file2" [formControl]="complexForm.controls['file2']"> 
    <div class="form-group"> 
     <button type="submit" class="btn btn-primary pull-right">Submit</button> 
    </div> 

</form> 

diese meine .ts

Datei

complexForm : FormGroup; 
constructor(fb: FormBuilder){ 
    this.complexForm = fb.group({ 
     'name': [], 
     'file1':[], 
     'file2':[] 
    }); 
} 
fileChanged(e: Event) { 
    debugger; 
    var target: HTMLInputElement = e.target as HTMLInputElement; 
    for(var i=0;i < target.files.length; i++) { 
     this.upload(target.files[i]); 
    } 
    } 

    upload(uploads: File) { 
    debugger 
    var formData: FormData = new FormData(); 
    formData.append("files", uploads, uploads.name); 
    console.log(formData); 
} 
    submitForm(values){ 
    console.log(values); 
    console.log(FormData); 
    } 

aber während Datei auswählen, wird Upload-Funktion genannt, aber mit formData.i nichts wollen anhängt nur hochladen Datei nach form submission.but ein problem mit formdata.während trösten zeigt es nichts.in formbuild auch nicht zeigt.so jede lösung dafür? danke im voraus.

Answer 1

Als Erstes rufen Sie für jede Datei den Upload auf, in dem Sie eine neue Instanz von FormData erstellen. Dies bedeutet, dass selbst wenn Sie versuchen, dieses Formular zu senden, es nur die letzte der Dateien enthalten wird.

Zweitens haben Sie keinen Verweis auf diese FormData-Instanz, die Sie senden möchten, da sie innerhalb des Bereichs der Upload-Funktion var formData: FormData = new FormData(); erstellt wird. Daher ist es in der Funktion submitForm nicht verfügbar. Sie versuchen, dort zu protokollieren, ist der Objektprototyp für FormData und es enthält keine nützliche Information.

Um es erneut zu versuchen Sie Ihren Code Refactoring benötigen:

complexForm : FormGroup; 
// Declare the object here 
private formData: FormData = new FormData(); 

constructor(fb: FormBuilder){ 
    this.complexForm = fb.group({ 
     'name': [], 
     'file1':[], 
     'file2':[] 
    }); 
} 
fileChanged(e: Event) { 
    debugger; 
    var target: HTMLInputElement = e.target as HTMLInputElement; 
    for(var i=0;i < target.files.length; i++) { 
     this.upload(target.files[i]); 
    } 
    } 

    upload(uploads: File) { 
    debugger 
    // now reference the instance 
    this.formData.append('file', uploads, uploads.name); 
    console.log(formData); 
} 
    submitForm(values){ 
    console.log(values); 
    // Check the formData instance 
    console.log(this.formData); 
}