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