Angular 上传Excel文件（CSV）-2

有人能帮我介绍一下angular 2中如何实现csv文件上传吗？

这是一个可以重用的组件

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

您可以使用安装

npm install ng2-file-upload --save

页面上的express中有一个后端示例。

HTML代码：
HTML CODE:
-------------------------------------------------------------------------------
<div class="form-group">
<label for="fileChooseAFile">Choose a File</label>
<input id="fileChooseAFile" #data type="file" class="form-control" (change)="getFiles(data)" name="fileChooseAFile" accept=".csv">
</div>

<div class="col-md-12">
<div class="btn-bar">
<a href="#" class="btn btn-link">Cancel</a>
<a (click)="postfile();" class="btn btn-secondary">Upload</a>
</div>
</div>

-----------------------------------------------------------------------------
Component Code
-----------------------------------------------------------------------------
getFiles(files: any) {
        let taskExcelFiles: FileList = files.files;
        this.file = taskExcelFiles[0];
    }

postfile() {
        if (this.file !== undefined) {
       this._uploadService.postFormData(this.file)
            .map(response => {
                this.alertClosed = false;
            }).catch(error => this.errorMessage = <any>error);
            setTimeout(() => {
                this.alertClosed = true;
            }, 5000);
        } else {
            //show error
        }
    }

-----------------------------------------------------------------------
Service Code
-----------------------------------------------------------------------
postFormData(file: File) {
        return Observable.fromPromise(new Promise((resolve, reject) => {
            let formData: any = new FormData()
            let xhr = new XMLHttpRequest()

            formData.append("file", file, file.name);

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        resolve(xhr.response)
                    } else {
                        reject(xhr.response)
                    }
                }
            }
            xhr.open("POST", environment.baseUrl + '/uploadExcel', true);
            xhr.send(formData)
        }));
    }

-------------------------------------------------------------------------------
选择一个文件
上载
-----------------------------------------------------------------------------
组件代码
-----------------------------------------------------------------------------
getFiles（文件：任意）{
让taskExcelFiles:FileList=files.files；
this.file=taskExcelFiles[0]；
}
postfile（）{
if（this.file！==未定义）{
this.\u uploadService.postFormData（this.file）
.map（响应=>{
this.alertClosed=false；
}).catch（error=>this.errorMessage=error）；
设置超时（（）=>{
this.alertClosed=true；
}, 5000);
}否则{
//显示错误
}
}
-----------------------------------------------------------------------
服务代码
-----------------------------------------------------------------------
postFormData（文件：file）{
可观察的返回。fromPromise（新承诺）（（解决，拒绝）=>{
让formData:any=new formData（）
设xhr=newXMLHttpRequest（）
formData.append（“文件”，文件，文件名）；
xhr.onreadystatechange=函数（）{
if（xhr.readyState==4）{
如果（xhr.status==200）{
解析（xhr.response）
}否则{
拒绝（xhr.响应）
}
}
}
xhr.open（“POST”，environment.baseUrl+'/uploadExcel'，true）；
xhr.send（formData）
}));
}

Angular 2+为上传文件提供了良好的支持。不需要任何第三方库

以下是我的解决方案：

将内容类型保留为空非常重要。如果将“内容类型”设置为“多部分/表单数据”，则上载将不起作用

upload.component.html

<input type="file" (change)="fileChange($event)" name="file" />

---

}

这是关于angular2上传文件的。@Pengyy，这似乎不适用于我的angular2版本。我得到一些错误扫描我使用自己的php后端的valor软件？是的，当然。组件独立于后端。能否创建fiddle链接能否创建fiddle

fileChange(event): void {
    const fileList: FileList = event.target.files;
    if (fileList.length > 0) {
        const file = fileList[0];

        const formData = new FormData();
        formData.append('file', file, file.name);

        const headers = new Headers();
        // It is very important le leave the Content-Type empty, if you set it to 'multipart/form-data' it will not work !
       // do not set headers.append('Content-Type', 'multipart/form-data');
        headers.append('Authorization', 'Bearer ' + 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9');
        const options = new RequestOptions({headers: headers});

        this.http.post('https://api.mysite.com/uploadfile', formData, options)
             .map(res => res.json())
             .catch(error => Observable.throw(error))
             .subscribe(
                 data => console.log('success'),
                 error => console.log(error)
             );
    }
}