如何在Angular2中上传文件

我必须随图像一起提交表单。 我试过这个代码（有多种方式），但没有为我工作。 有没有人有工作演示file upload使用angular2请帮助我。

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对象来做到这一点：

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

看到这个PLUNK的更多细节： https ://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p = info。

在Angular回购中有一个问题和一个待决的PR：

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

调用你的函数（组件文件）：

 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

这是Angular 2的版本

我们需要在我们的Angular 2应用程序中实现拖放文件inputfunction。

我们为此select了ng-file-upload 。

我们试图按照帮助页面 。 正如所build议的，实现了drag-upload-input.html ＆ drag-upload-input.component.ts ，如下所示：

拖拽上传，input.html

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

拖拽上传，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; } } 

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

资源