アップロードする画像を含む角度2のフォームを投稿するには

Question

注： 私はすでに.net web apiを使用しています。 ように：

public HttpResponseMessage FormPost() 
      { 
    string member_f_name = HttpContext.Current.Request.Form["member_name"]; 
    if (HttpContext.Current.Request.Files.Count > 0) 
        { 

         myfiles = HttpContext.Current.Request.Files[0]; 
         if (myfiles == null) 
          retmsg = "Comment Post Successfully."; 
         else 
         { 
          if (myfiles.ContentLength > 0) 
           retmsg = "Image Uploaded successfully."; 
          else 
           retmsg = "Comment Post Successfully."; 
         } 
        } 
} 

私は、テキストボックスのテキストを持つファイル（画像）を投稿したいです。 同じAPIコードです。 私はすでに角度から2つの別々のコードが使用されています。 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) 
     ) 


    } 
} 

フォームを使用してすべてのデータを送信するためのもう1つ。

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) 
    ) 

} 

Answer 1

<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`}); 
} 

Answer 2

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.