如何上传CSV文件并使用angular2读取它们？

Question

我有一个需要上传一个.CSV文件，并在我的组件中读取它们，我已经通过这个博客，但它有一个.CSV文件存储在一个特定的位置，我想上传.CSV文件并在里面读取它们我的组件。我该怎么做

我们可以使用插件吗？如果不是的话，我们如何才能实现这一目标。

这就是我试图

视图

<input type="file" name="File Upload" id="txtFileUpload" 
     (change)="changeListener($event)" 
     accept=".csv"/> 

组件

changeListener($event:Response): void { 
    debugger; 
    // i am not able to get the data in the CSV file 
    } 

中的ChangeListener（），我不能够汤姆获得的内容代码.CSV文件，任何人都可以帮助我解决这个问题吗？

谢谢

Answer 1

我在我的应用程序上做了一个上传功能。希望它可以帮助

这里是我的成分在我的样本上传功能

uploadDatasource(fileInput: any) { 

let file = fileInput.target.files[0]; 
let fileName = file.name; 


let payload = { 
    file, 
} 

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


this.DsListService.uploadDatasource(formData) 
    .subscribe(
    response => { 
     console.log('UPLOADING success'); 


    }, 
    error => { 
     console.log('error',error) 
    }); 

} 

这里是我的服务类

import { Injectable } from '@angular/core'; 
import { Headers, Http, RequestOptions, Response, URLSearchParams } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 
import { Config } from '../config/config'; 

@Injectable() 
export class DsListService { 

    private config = new Config; 

    constructor(private http: Http) { } 


    uploadDatasource(payload): Observable<any[]> { 
    let headers = new Headers(); 

    headers.append('Accept', 'application/json, text/plain,'); 
    let options = new RequestOptions({ headers: headers }); 


    return this.http.post(`API_UPLOAD_PATH`,payload, options) 
     .map((res: Response) => { 
     let data = res.json(); 
     return data; 
     }) 
     .catch(error => Observable.throw(error)) 

    } 
} 

，这里是我的html

<input type="file" [(ngModel)]="Model.datasourcelistdata" name="datasource_upload" id="datasource_upload" accept=".xlsx,.xls,.csv" ngf-max-size="20MB" fd-input (change)="uploadDatasource($event)" /> 

Answer 2

上传CSV文件到位置并获取位置URL和上传的csv文件名称并使用我创建的此服务。

import { Injectable, Inject} from '@angular/core'; 
import { Http } from '@angular/http'; 
import {HttpService} from './http.service'; 
@Injectable() 
export class CSVSERVICE { 
    csvUrl: string = './csv_upload?id='; // URL to web API 
    csvData: any[] = []; 

    constructor (private http: Http) {} 

    readCsvData (fileName) { 
    return this.http.get(this.csvUrl + fileName) 
    .map(
     (idata) => { 
     let csvData = idata['_body'] || ''; 
    let allTextLines = csvData.split(/\r?\n|\r/); 
    let headers = allTextLines[0].split(','); 
    let lines = []; 

    for (let i = 0; i < allTextLines.length; i++) { 
     // split content based on comma 
     let data = allTextLines[i].split(','); 
     if (data.length === headers.length) { 
      let tarr = []; 
      for (let j = 0; j < headers.length; j++) { 
       tarr.push(data[j]); 
      } 

// log each row to see output and 
      console.log(tarr); 
      lines.push(tarr); 
     } 
    } 
    return lines; 
     }, // this.extractData, 
     err => this.handleError(err) 
    ); 
    } 



    private handleError (error: any) { 
    let errMsg = (error.message) ? error.message : 
     error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
    console.error(errMsg); 
    return errMsg; 
    } 
} 

Answer 3

将您的csv文件上传到某个位置并获取csv文件数据。请试试这个： -

Component.html： -

<input type="file" class="upload" (change)="changeListener($event.target.files)"> 

Component.ts： -

public changeListener(files: FileList){ 
    console.log(files); 
    if(files && files.length > 0) { 
    let file : File = files.item(0); 
     console.log(file.name); 
     console.log(file.size); 
     console.log(file.type); 
     let reader: FileReader = new FileReader(); 
     reader.readAsText(file); 
     reader.onload = (e) => { 
      let csv: string = reader.result; 
      console.log(csv); 
     } 
    } 
}