エクセルファイル（CSV）のアップロード - 角2

Question

アングラ2のcsvファイルのアップロード方法については誰でも助けてくれますか？

Answer 1

ここには再利用できるコンポーネントがあります。ページの急行で、バックエンドの例があります

npm install ng2-file-upload --save 

で

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

あなたはインストールすることができます。

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

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

}