使用Angular 4上传文件不起作用。结果undefind

Question

使用Angular 4上传文件不起作用。结果未定义。

文件信息与事件一起出现，但FormData不起作用并使结果未定义。

HTML文件

<form #form="ngForm" enctype="multipart/form-data" novalidate> 
    <input type="file" id="sef" name="sef" class="form-control" ngModel (change)="getSef($event)">  
    <button class="btn btn-primary" (click)="envirArquivos(form.value)">Enviar</button> 
</form> 

TS文件

import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    selector: 'mw-compare-nfe', 
    templateUrl: './compare-nfe.component.html' 
}) 
export class CompareNFEComponent implements OnInit { 

    arquivoZip: any 

    getZip(event) { 
     let fileList: FileList = event.target.files; 
     let file: File = fileList[0]; 

     console.log(file) . <--- The object file is defined. 

     let formData: FormData = new FormData(); 
     this.arquivoZip = formData.append('File', file, file.name); 

    } 

    constructor() { } 

    ngOnInit() { 
    } 

    envirArquivos(order: Order) { 
     console.log(this.arquivoZip) . <--- Undefined 
    } 

} 

Answer 1

FormData.append将增加/ intance你已经创建追加电流值的formData，但其本身不回报的情况下，看到DOCS。

所以，你必须要追加文件，并将其设置为您的组件在不同的行

let formData: FormData = new FormData(); 
formData.append('File', file, file.name); 
this.arquivoZip = formData; 

Answer 2

文件上传提交： - 完整的代码

@Component({ 
    selector: 'app-root', 
    template: '<div>' 
     + '<input type="file" (change)="upload($event)">' 
     + '</div>', 
}) 

export class AppComponent { 

    constructor(private _service: commonService) { } 

    upload(event: any) { 
     let files = event.target.files; 
     let fData: FormData = new FormData; 

     for (var i = 0; i < files.length; i++) { 
      fData.append("file[]", files[i]); 
     } 
     var _data = { 
      filename: 'Sample File', 
      id: '0001' 
     } 

     fData.append("data", JSON.stringify(_data)); 

     this._service.uploadFile(fData).subscribe(
      response => this.handleResponse(response), 
      error => this.handleError(error) 
     ) 
    } 
    handleResponse(response: any) { 
     console.log(response); 
    } 
    handleError(error: string) { 
     console.log(error); 
    } 
} 

服务

@Injectable() 
export class commonService { 
    _url: string; 
    constructor(private http: Http) { } 

    uploadFile(data: any): Observable<{}> { 
     this._url = 'http://localhost:4200/XXXXXXXXXX/uploadFile'; 
     return this.http.post(this._url, data) 
      .map(this.handleData) 
      .catch(this.handleError); 
    } 

    private handleData(res: Response) { 
     let data = res.json(); 
     return data; 
    } 
    private handleError(error: Response | any) { 
     return Observable.throw('API failed'); 
    } 
} 

More info