angular - 文件上传 Angular ?

标签 angular file-upload angular2-http

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

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

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

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

最佳答案

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"

关于angular - 文件上传 Angular ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40214772/

相关文章:

javascript - “ng build –env=prod” 命令不起作用

node.js - 如何将同名文件上传到 Amazon S3 并覆盖现有文件?

codeigniter - 您没有选择要上传的文件在 codeigniter 中出现错误

javascript - 如何将数据从一个组件传递到另一个组件以进行编辑表单?

javascript - SignalR Javascript 客户端回调未被触发

javascript - 在 Angular4 应用程序中创建自己的日期选择器

asp.net - 如何在 FileUpload 控件 C# 中添加水印文本

node.js - Angular2 和 Node : Response for preflight has invalid HTTP status code 403

http - 如何使用 angular2 http API 跟踪上传/下载进度

unit-testing - 如何模拟服务?