上傳Excel文件（CSV）-angular 2

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空是非常重要的。如果您將'Content-Type'設置爲'multipart/form-data'，則上傳不起作用！

upload.component.html

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

upload.component.ts

出口類UploadComponent實現的OnInit { 構造（公共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) 
      ); 
    } 
} 

}