Cómo subir un archivo en Angular2

Tengo que enviar un formulario junto con la imagen. He intentado este código (con varias formas) pero no funcionó para mí. ¿Hay alguien que tenga una demostración funcional de carga de archivos usando angular2 por favor ayúdenme?

component.html

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

De hecho, la clase Http no es compatible con eso en este momento.

Debe aprovechar el objeto XHR subyacente para hacer eso:

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

Consulte este plunkr para obtener más detalles: https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p=info .

Hay un problema y un PR pendiente con respecto a esto en el repo Angular:

su archivo de servicio 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; } } 

llame a su función (archivo de componente):

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

su código html:

  

Método mejorado onChange ():

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

Aquí está la versión Angular 2

Necesitábamos implementar la función de entrada de archivo de arrastrar y soltar en una de nuestras aplicaciones de Angular 2 .

Seleccionamos ng-file-upload para esto.

Intentamos seguir la página de ayuda . Como se sugirió, implementó drag-upload-input.html y drag-upload-input.component.ts la siguiente manera:

drag-upload-input.html

   

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

El app.module.ts tiene FileUploadModule así:

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

Y el systemjs.config.js ve así:

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

fuente