Angular - POST上传文件

Question

我使用Angular,TypeScript将JSON数据和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到字符串，并将其发送到服务器？我记得在AngularJS（v1）你会使用transformRequest。

Answer 1

看我的代码，但要注意。我使用async/await，因为最新的Chrome beta版可以读取任何es6代码，通过编译获得TypeScript。所以，你必须用.then()代替asyns/await。

输入更改处理：

/** 
* @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

首先，你必须创建自己的在线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); 

Answer 3

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

和uploader代码

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 4

放眼这个问题Github - Request/Upload progress handling via @angular/http，angular2 http目前还不支持文件上传。

对于非常基本的文件上传我创造了这样的服务功能作为一种解决方法（使用Тимофей's answer）：

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 5

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