Je dois soumettre un formulaire avec une image. J'ai essayé ce code (avec plusieurs façons) mais je n'ai pas travaillé pour moi. y a-t-il quelqu'un qui travaille avec une démonstration de téléchargement de fichier en utilisant angular2, aidez-moi s'il vous plaît.
composant.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>
composant.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');
}
);
}
En fait, la classe Http
ne le supporte pas pour le moment.
Pour ce faire, vous devez exploiter l'objet XHR sous-jacent:
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);
});
}
}
Voir ce plunkr pour plus de détails: https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p=info .
Il y a un problème et un PR en attente à ce sujet dans le rapport angulaire:
votre fichier de service 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;
}
}
appelle votre fonction (fichier composant):
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);
});
}
votre code html:
<input type="file" class="form-control" name="documents" (change)="onChange($event)" [(ngModel)]="stock.documents" #documents="ngModel">
Amélioration de la méthode 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);
}
Voici la version angulaire 2
Nous avions besoin d'implémenter la fonctionnalité d'entrée de fichier glisser-déposer dans l'un de nos Angular 2 app.
Nous avons sélectionné ng-file-upload pour cela.
Nous avons essayé de suivre la page d'aide . Comme suggéré, implémenté drag-upload-input.html
& drag-upload-input.component.ts
comme suit:
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;
}
}
Le app.module.ts
a FileUploadModule
comme ceci:
// 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 { }
Et le systemjs.config.js
ressemble à ceci:
(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);