Angular4 文件上传

最新推荐文章于 2018-12-03 16:36:50 发布

转载最新推荐文章于 2018-12-03 16:36:50 发布 · 5.3k 阅读

文章标签：

#angular

angular 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用Angular实现文件上传功能，无需第三方库支持。通过示例代码展示了如何选择文件、读取文件信息，并使用FormData对象将文件数据发送到服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Angular provides good support for uploading file. Any third party library is not 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();
        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)
            )
    }
}