ファイルをAngular2にアップロードするには

Question

私は画像とともにフォームを提出しなければなりません。私はこのコードを（複数の方法で）試してみましたが、私にとってはうまくいきませんでした。 ang2を使ってアップロードしたファイルのデモを作業している人は誰ですか？私を助けてください。

component.html

<form class="form-horizontal" role="form" > 

     <div class="form-group"> 
      <label class="control-label col-sm-4" for="myname" style="">Name<span class="asterisk">*</span></label> 
      <div class="col-sm-7"> 
       <div> 
        <input type="text" class="form-control" id="myname" 
        [(ngModel)]="myfile.name">       
       </div>     
      </div>        
     </div>   


     <div class="form-group"> 
      <label class="control-label col-sm-4" for="myimage">Image</label> 
      <div class="col-sm-7"> 
       <div> 
        <input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." />       
       </div> 
      </div> 
     </div> 


     <div class="form-group">   
     <div class="text-center"> 
      <button type="button" (click)="upload()">Upload</button>    
     </div> 
     </div> 
    </form> 

component.ts実際に

 myfile={ 
       "name":"Mubashshir",    
       "image":'' 
    } 

    fileChangeEvent(fileInput: any){ 
     this.myfile.image = fileInput.target.files;   
    } 

    upload(){ 
      this.base_path_service.PostRequest('http://128.199.190.109/api/school/schoolDetail/',this.myfile) 
      .subscribe(
       data => { 
          console.log("data submitted");       
         }, 
       err => console.log(err), 
       () =>{ 
        console.log('Authentication Complete');      

       } 
      ); 
     } 

Answer 1

、Httpクラスは、現時点ではそれをサポートしていません。あなたはそれを行うための基本となるXHRオブジェクトを活用する必要が

：https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p=info：

import {Injectable} from 'angular2/core'; 
import {Observable} from 'rxjs/Rx'; 

@Injectable() 
export class UploadService { 
    constructor() { 
    this.progress$ = Observable.create(observer => { 
     this.progressObserver = observer 
    }).share(); 
    } 

    private makeFileRequest (url: string, params: string[], files: File[]): Observable { 
    return Observable.create(observer => { 
     let formData: FormData = new FormData(), 
     xhr: XMLHttpRequest = new XMLHttpRequest(); 

     for (let i = 0; i < files.length; i++) { 
     formData.append("uploads[]", files[i], files[i].name); 
     } 

     xhr.onreadystatechange =() => { 
     if (xhr.readyState === 4) { 
      if (xhr.status === 200) { 
      observer.next(JSON.parse(xhr.response)); 
      observer.complete(); 
      } else { 
      observer.error(xhr.response); 
      } 
     } 
     }; 

     xhr.upload.onprogress = (event) => { 
     this.progress = Math.round(event.loaded/event.total * 100); 

     this.progressObserver.next(this.progress); 
     }; 

     xhr.open('POST', url, true); 
     xhr.send(formData); 
    }); 
    } 
} 

は、より多くの詳細については、このplunkrを参照してください。

• https://github.com/angular/angular/issues/10424
• https://github.com/angular/angular/pull/7310/files

Answer 2

あなたのHTTPサービスのファイル：

import { Injectable } from "@angular/core"; 
import { ActivatedRoute, Router } from '@angular/router'; 
import { Http, Headers, Response, Request, RequestMethod, URLSearchParams, RequestOptions } from "@angular/http"; 
import {Observable} from 'rxjs/Rx'; 
import { Constants } from './constants'; 
declare var $: any; 

@Injectable() 
export class HttpClient { 
    requestUrl: string; 
    responseData: any; 
    handleError: any; 

    constructor(private router: Router, 
    private http: Http, 
    private constants: Constants, 
) { 
    this.http = http; 
    } 

    postWithFile (url: string, postData: any, files: File[]) { 

    let headers = new Headers(); 
    let formData:FormData = new FormData(); 
    formData.append('files', files[0], files[0].name); 
    // For multiple files 
    // for (let i = 0; i < files.length; i++) { 
    //  formData.append(`files[]`, files[i], files[i].name); 
    // } 

    if(postData !=="" && postData !== undefined && postData !==null){ 
     for (var property in postData) { 
      if (postData.hasOwnProperty(property)) { 
       formData.append(property, postData[property]); 
      } 
     } 
    } 
    var returnReponse = new Promise((resolve, reject) => { 
     this.http.post(this.constants.root_dir + url, formData, { 
     headers: headers 
     }).subscribe(
      res => { 
      this.responseData = res.json(); 
      resolve(this.responseData); 
      }, 
      error => { 
      this.router.navigate(['/login']); 
      reject(error); 
      } 
    ); 
    }); 
    return returnReponse; 
    } 
} 

問題と角レポでこれに関する保留中のPRがある

あなたの機能（コンポーネントファイル）を呼び出します。

onChange(event) { 
    let file = event.srcElement.files; 
    let postData = {field1:"field1", field2:"field2"}; // Put your form data variable. This is only example. 
    this._service.postWithFile(this.baseUrl + "add-update",postData,file).then(result => { 
     console.log(result); 
    }); 
} 

HTMLコード：

<input type="file" class="form-control" name="documents" (change)="onChange($event)" [(ngModel)]="stock.documents" #documents="ngModel"> 

Answer 3

の改善のonChange（）メソッド：

file: File; 
    onChange(event: EventTarget) { 
     let eventObj: MSInputMethodContext = <MSInputMethodContext> event; 
     let target: HTMLInputElement = <HTMLInputElement> eventObj.target; 
     let files: FileList = target.files; 
     this.file = files[0]; 
     console.log(this.file); 
    } 

Answer 4

Here is the Angular 2 version

を私たちは、実装するために必要なドロップファイル入力機能を当社ののいずれかにドラッグしますアプリ。

ng-file-uploadを選択しました。

私たちはhelp pageに従いました。

ドラッグアップロード-input.html

<!-- we only need single file upload --> 
<input type="file" ng2FileSelect [uploader]="uploader" /> 

ドラッグアップロード-input.component：示唆したように、次のようなdrag-upload-input.html & drag-upload-input.component.tsを実施しました。TS

import { Component } from '@angular/core'; 
import { FileUploader } from 'ng2-file-upload'; 

// const URL = '/api/'; 
const URL = 'https://evening-anchorage-3159.herokuapp.com/api/'; 

@Component({ 
    moduleId: module.id, 
    selector: 'drag-upload-input', 
    templateUrl: './drag-upload-input.html' 
}) 
export class DragUploadInput { 
    public uploader: FileUploader = new FileUploader({ url: URL }); 
    public hasBaseDropZoneOver: boolean = false; 
    public hasAnotherDropZoneOver: boolean = false; 

    public fileOverBase(e: any): void { 
    this.hasBaseDropZoneOver = e; 
    } 

    public fileOverAnother(e: any): void { 
    this.hasAnotherDropZoneOver = e; 
    } 
} 

はapp.module.tsは、このようFileUploadModuleを持っている：

// File upload modules 
import { FileUploadModule } from 'ng2-file-upload'; 
import { DragUploadInput } from './file-upload/drag-upload-input.component'; 

//other imports 

@NgModule({ 
    imports: [ ... other imports 
FileUploadModule 
], 
    declarations: [ ... other declarations 
DragUploadInput], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

そしてsystemjs.config.jsは、次のようになります

(function (global) { 
    System.config({ 
    // map tells the System loader where to look for things 
    map: { 
     // other libraries 
     'ng2-file-upload': 'node_modules/ng2-file-upload', 
    }, 
    packages: { 
     // other packages 
     ng2-file-upload': { 
     main: 'ng2-file-upload.js', 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this); 

source