Question

任何人都可以帮我解决上传角度2中的csv文件的问题吗？

Answer 1

这是您可以重复使用的组件。

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

您可以使用

进行安装

npm install ng2-file-upload --save

页面上有明确的后端示例。

Answer 2

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)
        }));
    }

Answer 3

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

这是我的解决方案：

将 Content-Type 留空是非常重要。如果您将“内容类型”设置为“multipart / form-data”，则上传将无效！

upload.component.html

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

<强> upload.component.ts

导出类UploadComponent实现OnInit { 构造函数（public http：Http）{}

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)
             );
    }
}

}

上传Excel文件（CSV） - 角形2

3 个答案: