文件上传角度? [英] File Upload In Angular?

问题描述

我知道这是一个非常普遍的问题，但我无法在 Angular 2 中上传文件.我试过了

I know this is very a general question but I am failing to upload a file in Angular 2. I have tried

1) http://valor-software.com/ng2-file-upload/ 和

2) http://ng2-uploader.com/home

...但失败了.有没有人在 Angular 中上传过文件?你用的什么方法?怎么做?如果提供任何示例代码或演示链接，将不胜感激.

...but failed. Has anyone uploaded a file in Angular? What method did you use? How to do so? If any sample code or demo link is provided it will be really appreciated.

推荐答案

Angular 2 为上传文件提供了很好的支持.不需要第三方库.

Angular 2 provides good support for uploading files. No third party library is required.

<input type="file" (change)="fileChange($event)" placeholder="Upload file" accept=".pdf,.doc,.docx">

fileChange(event) {
    let fileList: FileList = event.target.files;
    if(fileList.length > 0) {
        let file: File = fileList[0];
        let formData:FormData = new FormData();
        formData.append('uploadFile', file, file.name);
        let headers = new Headers();
        /** In Angular 5, including the header Content-Type can invalidate your request */
        headers.append('Content-Type', 'multipart/form-data');
        headers.append('Accept', 'application/json');
        let options = new RequestOptions({ headers: headers });
        this.http.post(`${this.apiEndPoint}`, formData, options)
            .map(res => res.json())
            .catch(error => Observable.throw(error))
            .subscribe(
                data => console.log('success'),
                error => console.log(error)
            )
    }
}

使用@angular/core": "~2.0.0" 和@angular/http: "~2.0.0"

using @angular/core": "~2.0.0" and @angular/http: "~2.0.0"

这篇关于文件上传角度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！