如何在angular 2中发布表单并上载图像

注: 我已经在使用.NETWebAPI了，它与postman配合得很好。 比如：

我只想发布带有文本框文本的文件（图像）。 使用相同的api代码。 我已经从angular使用了两个独立的代码。 1.用于文件上载（但在文件更改时上载文件） 2.一个用于点击提交按钮提交数据

用于文件上载的代码Snippt

fileChange(event) {
        debugger;

    let fileList: FileList = event.target.files;
    if(fileList.length > 0) {
        let file: File = fileList[0];
        let formData:FormData = new FormData();
        formData.append('file', file, file.name);
        let headers = new Headers({'Access-Control-Allow-Origin': '*'} );
        headers.append('enctype', 'multipart/form-data');  
        headers.append('Accept', 'application/json');  
        let method="post";
        let options = new RequestOptions({ headers: headers }); 
        let apiUrl1 = "http://local:port/api/Controller/Action";  
        this.http.post(apiUrl1, formData, options)  
       .map(res => res.json())  
        .catch(error => Observable.throw(error))  
        .subscribe(  
        data => console.log('success'),  
        error => console.log(error)  
        )  


    }
}

另一个用于提交表单中的所有数据

submitForm(myForm:NgForm) {
  debugger;

  var objFormData = new FormData();
                for (var key in myForm.value)
                    objFormData.append(key, myForm.value[key]);
                  let headers = new Headers({'Access-Control-Allow-Origin': '*'} );
        headers.append('enctype', 'multipart/form-data');  
        headers.append('Accept', 'application/json');  
          let options = new RequestOptions({ headers: headers }); 
// this.adminRegister.register(objFormData);
 let apiUrl1 = "http://localhost:port/api/Controller/Action";  
   this.http.post(apiUrl1, objFormData, options)  
       .map(res => res.json())  
    .catch(error => Observable.throw(error))  
    .subscribe(  
    data => console.log('success'),  
    error => console.log(error)  
    )  

 }

---

我想上传文件和文本字段以及。与表单一样，表单包含文本字段、图像上载和“提交”按钮上的“提交”按钮。不在文件上上载更改文件。

submitForm(myForm:NgForm) {
  debugger;

  var objFormData = new FormData();
                for (var key in myForm.value)
                    objFormData.append(key, myForm.value[key]);
                  let headers = new Headers({'Access-Control-Allow-Origin': '*'} );
        headers.append('enctype', 'multipart/form-data');  
        headers.append('Accept', 'application/json');  
          let options = new RequestOptions({ headers: headers }); 
// this.adminRegister.register(objFormData);
 let apiUrl1 = "http://localhost:port/api/Controller/Action";  
   this.http.post(apiUrl1, objFormData, options)  
       .map(res => res.json())  
    .catch(error => Observable.throw(error))  
    .subscribe(  
    data => console.log('success'),  
    error => console.log(error)  
    )  

 }

<div ng2FileDrop  [uploader]="uploader">
<input type="file" ng2FileSelect [uploader]="uploader" multiple />

import { Component, OnInit } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';
@Component({
  selector: 'app-files',
  templateUrl: 'files.component.html',
  styleUrls: ['files.component.css'],
})
export class FilesComponent implements OnInit {
  uploader = new FileUploader({url: `YOUR URL`});
}

public postImage(url: string) {
  let formData: FormData = new FormData();
  formData.append('image', image);
  formData.append('text', 'hi this is my text');

  this.postWithXhr("url"
}   

 public postWithXhr(url, formdata: FormData, headers?: Header[]) {       
        if (!headers) {
            headers = [];
        }

        if (headers['Access-Control-Allow-Origin']) {
            headers.push({ header: 'Access-Control-Allow-Origin', value: '*' });
        }

        return Observable.create(observer => {
            const xhr: XMLHttpRequest = new XMLHttpRequest();
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        observer.next({ response: xhr.response, status: xhr.status });
                        observer.complete();
                    } else {
                        observer.error({ response: xhr.response, status: xhr.status });
                    }
                }
            };

            xhr.open('POST', url, true);

            if (headers) {
                for (const header of headers) {
                    xhr.setRequestHeader(header.header, header.value);
                }
            }
            xhr.send(formdata);
        });
    }

Hi think this will help you.