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

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 会将 add/append 当前值添加到您创建的 formData 实例中，但它本身不会 return实例，见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');
    }
}

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

Upload File with Angular 4 does not work. Result undefind

angular

angular-file-upload