在Angular中上传文件?


Answers:


375

Angular 2为上传文件提供了良好的支持。无需第三方库。

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


5
至少在我看来,它不起作用。sailsJs服务器接收到空文件数组/对象
Kaleem Ullah

19
它对我headers.append('enctype', 'multipart/form-data');有用,除了-我必须在这条线上工作- (用“ enctype”代替“ Content-Type”)。也许这取决于服务器端代码。(即api)
Ariful Islam

28
如果Angular团队会写一些关于该主题的文档,那太好了,我在他们的文档中找不到关于它的任何一行。该代码示例已过时,不适用于v4 +。
罗布B

10
请注意,对于某些应用程序服务器,将拒绝设置内容类型。您需要将其留空:let headers = new Headers(); 浏览器将为您整理所有内容。
PeterS

6
LMFAO用这种胡扯挣扎了20分钟,直到我意识到我根本不需要设置标题。请注意使用.Net webapi的angular 4.xx的其他用户,请勿尝试设置标题!感谢指出@PeterS
Jota.Toledo 17-6-29
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.