angular度上传的文件

我正在使用Angular，TypeScript发送一个文件，以及JSON数据到服务器。

以下是我的代码：

import {Component, View, NgFor, FORM_DIRECTIVES, FormBuilder, ControlGroup} from 'angular2/angular2'; import {Http, Response, Headers} from 'http/http'; @Component({ selector: 'file-upload' }) @View({ directives: [FORM_DIRECTIVES], template: ` <h3>File Upload</h3> <div> Select file: <input type="file" (change)="changeListener($event)"> </div> ` }) export class FileUploadCmp { public file: File; public url: string; headers: Headers; constructor(public http: Http) { console.log('file upload Initialized'); //set the header as multipart this.headers = new Headers(); this.headers.set('Content-Type', 'multipart/form-data'); this.url = 'http://localhost:8080/test'; } //onChange file listener changeListener($event): void { this.postFile($event.target); } //send post file to server postFile(inputValue: any): void { var formData = new FormData(); formData.append("name", "Name"); formData.append("file", inputValue.files[0]); this.http.post(this.url +, formData , { headers: this.headers }); } } 

我怎样才能将formData转换为string并将其发送到服务器。 我记得在Angular1中你会使用transformRequest。

Answer 1

看看我的代码，但请注意。 我使用asynchronous/等待，因为最新的Chrometesting版可以读取任何es6代码，通过编译TypeScript获取。 所以，你必须用.then .then()来代替asyns / await。

input改变处理器：

 /** * @param fileInput */ public psdTemplateSelectionHandler (fileInput: any){ let FileList: FileList = fileInput.target.files; for (let i = 0, length = FileList.length; i < length; i++) { this.psdTemplates.push(FileList.item(i)); } this.progressBarVisibility = true; } 

提交处理程序

 public async psdTemplateUploadHandler (): Promise<any> { let result: any; if (!this.psdTemplates.length) { return; } this.isSubmitted = true; this.fileUploadService.getObserver() .subscribe(progress => { this.uploadProgress = progress; }); try { result = await this.fileUploadService.upload(this.uploadRoute, this.psdTemplates); } catch (error) { document.write(error) } if (!result['images']) { return; } this.saveUploadedTemplatesData(result['images']); this.redirectService.redirect(this.redirectRoute); } 

FileUploadService。 该服务还存储上传正在进行中的$ property，在其他地方，您可以订阅它并获得每500毫秒的新值。

 import { Component } from 'angular2/core'; import { Injectable } from 'angular2/core'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/share'; @Injectable() export class FileUploadService { /** * @param Observable<number> */ private progress$: Observable<number>; /** * @type {number} */ private progress: number = 0; private progressObserver: any; constructor () { this.progress$ = new Observable(observer => { this.progressObserver = observer }); } /** * @returns {Observable<number>} */ public getObserver (): Observable<number> { return this.progress$; } /** * Upload files through XMLHttpRequest * * @param url * @param files * @returns {Promise<T>} */ public upload (url: string, files: File[]): Promise<any> { return new Promise((resolve, reject) => { 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) { resolve(JSON.parse(xhr.response)); } else { reject(xhr.response); } } }; FileUploadService.setUploadUpdateInterval(500); 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); }); } /** * Set interval for frequency with which Observable inside Promise will share data with subscribers. * * @param interval */ private static setUploadUpdateInterval (interval: number): void { setInterval(() => {}, interval); } } 

Answer 2

看着这个问题https://github.com/angular/angular/issues/10424，angular2 http还不支持file upload。

对于非常基本的file upload，我创build了一个解决方法（使用Тимофей的答案）这样的服务function：

  uploadFile(file:File):Promise<MyEntity> { return new Promise((resolve, reject) => { let xhr:XMLHttpRequest = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState === 4) { if (xhr.status === 200) { resolve(<MyEntity>JSON.parse(xhr.response)); } else { reject(xhr.response); } } }; xhr.open('POST', this.getServiceUrl(), true); let formData = new FormData(); formData.append("file", file, file.name); xhr.send(formData); }); } 

Answer 3

你的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 4

在我的项目中，我使用XMLHttpRequest发送multipart / form-data。 我认为这将适合你。

和上传者代码

 let xhr = new XMLHttpRequest(); xhr.open('POST', 'http://www.example.com/rest/api', true); xhr.withCredentials = true; xhr.send(formData); 

这里是例子： https ： //github.com/wangzilong/angular2-multipartForm

Answer 5

首先，你必须创build自己的内联TS类，因为FormData类目前还没有得到很好的支持：

 var data : { name: string; file: File; } = { name: "Name", file: inputValue.files[0] }; 

然后你把它发送到服务器与JSON.stringify（数据）

 let opts: RequestOptions = new RequestOptions(); opts.method = RequestMethods.Post; opts.headers = headers; this.http.post(url,JSON.stringify(data),opts);