Wie man Datei in Angular2 hochladen

Question

Ich muss ein Formular zusammen mit Bild übermitteln. Ich habe diesen Code (mit mehreren Möglichkeiten) versucht, aber nicht für mich gearbeitet. Gibt es jemanden, der eine Demo-Datei zum Hochladen von Dateien unter Verwendung von angular2 hat? Bitte helft mir dabei.

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

In der Tat, die Http Klasse unterstützen, dass im Moment nicht.

Sie müssen das zugrunde liegende XHR Objekt nutzen, das zu tun:

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

dieses plunkr Siehe für weitere Informationen: https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p=info.

a Es gibt ein Problem und ein PR anhängig dies im Angular Repo zu:

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

Answer 2

Ihre http Service-Datei:

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

rufen Sie Ihre Funktion (Component-Datei):

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

Ihre HTML-Code:

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

Answer 3

Verbesserte onChange() -Methode:

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

Wir mussten zur Umsetzung Ziehen Sie Dateieingabefunktion in einen unserer Angular 2 App.

Wir haben ng-file-upload dafür ausgewählt.

Wir haben versucht, die help page zu folgen. Wie vorgeschlagen, umgesetzt drag-upload-input.html & drag-upload-input.component.ts wie folgt aus:

Drag-Upload-input.html

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

Drag-Upload-input.component.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; 
    } 
} 

Die app.module.ts hat FileUploadModule wie diese bekommen:

// 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 { } 

Und die systemjs.config.js sieht wie folgt aus:

(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