formdataにファイルを追加する方法angle2

Question

私はファイルアップロードコンポーネントを実行しています。私はそのためにformdataオブジェクトを提出する必要があります。何らかの理由でファイルや何かをformdataオブジェクトに追加することはできません。以下は私のコードです。

import {Component, ElementRef, 
     ViewChild,EventEmitter, Input, Output, OnInit, OnDestroy} from "@angular/core"; 
import { UploadService } from './file-upload.service'; 

@Component({ 
    selector: 'dbs-file-upload', 
    template: ` <div class="file-upload-wrapper"> 
        <dbs-input [(ngModel)]="fileName" type="text" class="input-long" placeholder='{{"upload.file_input_placeholder" | translate}}' readonly></dbs-input> 
        <button class="btn-browse" for="files"> 
         <label for="files">Browse</label> 
         <input type="file" (change)="onChange($event)" 
           [multiple]="multiple" 
           id="files" style="visibility:hidden;" 
           accept=".csv, text/xml, application/xml, application/vnd.ms-excel" 
           #fileInput> 
         <img src="/images/ico_browse_plus.png"> 
        </button> 
       </div>`, 
    styleUrls: ['./file-upload.component.scss'], 
    providers: [UploadService] 
}) 


export class FileUploadComponent implements OnInit{ 

    @Input() fileName: string; 
    @Output() onSelect = new EventEmitter<any>(); 
    @Input() multiple: boolean = false; 
    // @ViewChild('fileInput') inputEl: ElementRef; 

    constructor(private service: UploadService) { 
     // this.service.progress.subscribe(data => { 
     //  // console.log(data); 
     // }) 
    } 

    ngOnInit() { 

    } 

    onChange(event) { 
      var files = event.srcElement.files; 
      console.log('filesss', files); 
      if (files.length > 0) { 
       let fd: FormData = new FormData(); 
       let xhr: XMLHttpRequest = new XMLHttpRequest(); 
       console.log(xhr, 'FAFAAJHAKB'); 
       for (let file of files) { 
        fd.append('files', file, file.name); 
       } 
       console.log(fd, 'FROM COMPAKAP'); 
      } 
      this.fileName = files[0].name; 
      this.onSelect.emit(files[0]); 

      // this.service.makeFileRequest('http://localhost:8080/mock/upload-file-list.json', [], files).subscribe(() => { 
      //  console.log('whyy why'); 
      // }) 
     } 
} 

私はconsole.logのときにファイルオブジェクトを追加しようとしていますが、formdataオブジェクトには何も含まれていません。右のように、少なくとも1つのファイルを追加する必要があります。誰かがここで何がうまくいかないか教えてくれますか？前もって感謝します。私の人生で初めて、私はファイルアップロードコードをやっています。

Answer 1

ここにあります。私はそこに自分のファイルを追加傾ける理由

let fileList: FileList = event.target.files; 
 
    if(fileList.length > 0) { 
 
     let file: File = fileList[0]; 
 
     let formData:FormData = new FormData(); 
 
     formData.append('uploadFile', file, file.name); 
 
     let headers = new Headers(); 
 
     /** No need to include Content-Type in Angular 4 */ 
 
     headers.append('Content-Type', 'multipart/form-data'); 
 
     headers.append('Accept', 'application/json'); 
 
     let options = new RequestOptions({ headers: headers }); 
 
     this.http.post(`${this.apiEndPoint}`, formData, options) 
 
      .map(res => res.json()) 
 
      .catch(error => Observable.throw(error)) 
 
      .subscribe(
 
       data => console.log('success'), 
 
       error => console.log(error) 
 
      ) 
 
    }

use this code inside onChange method