typescript – Angular2上传的文件

我使用Angular2，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转换为字符串并将其发送到服务器。我记得在Angular1，你会使用transformRequest。

我欣赏任何指导或建议。

看看我的代码，但要注意。我使用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，在其他地方，你可以订阅它，并获得新的价值每500ms。

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

typescript – Angular2上传的文件

猜你在找的Angularjs相关文章