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

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

我们有没有可以使用的内置插件？如果没有，我们如何才能实现这一目标

这是我尝试过的代码

查看

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

在changeListener（）中，我无法获取.CSV文件的内容，有人能帮我吗

---

谢谢你

我在我的应用上做了一个上传功能。希望能有帮助

下面是我的组件中的示例上载函数

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

  }
}

从'@angular/core'导入{Injectable}；
从“@angular/Http”导入{Headers，Http，RequestOptions，Response，URLSearchParams}；
从'rxjs/Rx'导入{Observable}；
从“../Config/Config”导入{Config}；
@可注射（）
导出类DsListService{
私有配置=新配置；
构造函数（私有http:http）{}
uploadDatasource（有效负载）：可观察{
let headers=新的headers（）；
append（'Accept'，'application/json，text/plain'，）；
let options=newrequestoptions（{headers:headers}）；
返回此.http.post（`API\u UPLOAD\u PATH`，有效负载，选项）
.map（（res:Response）=>{
让data=res.json（）；
返回数据；
})
.catch（错误=>Observable.throw（错误））
}
}

这是我的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)" />

---

将您的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;
  }
}

从'@angular/core'导入{Injectable，injection}；
从'@angular/Http'导入{Http}；
从“./http.service”导入{HttpService}；
@可注射（）
导出类CSVSERVICE{
csvUrl:string='./csv_upload？id='；//web API的URL
csvData:any[]=[]；
构造函数（私有http:http）{}
readCsvData（文件名）{
返回此.http.get（this.csvUrl+文件名）
.地图(
（idata）=>{
设csvData=idata[“U body”]| |“；
让allTextLines=csvData.split（/\r？\n | \r/）；
让headers=allTextLines[0]。拆分（'，'）；
让线=[]；
for（设i=0；ithis.handleError（err）
);
}
私有句柄错误（错误：任意）{
让errMsg=（error.message）？error.message：
error.status？`${error.status}-${error.statusText}`:'服务器错误'；
控制台错误（errMsg）；
返回errMsg；
}
}

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

Component.html:-

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

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 as string;
          console.log(csv);
       }
    }
}

---

Papa Angular解析包装器库是解析Angular组件中CSV文件的最佳解决方案之一。对于Angular 6和Angular 7，可以使用以下命令安装库：

npm install ngx-papaparse@3 --save

首先将模块导入应用程序

import { PapaParseModule } from 'ngx-papaparse';

@NgModule({
  ...
  imports: [
    ...
    PapaParseModule
  ]
})

在组件模板中：

<input type="file" #fileImportInput name="CSV File Upload" 
(change)="fileChangeListener($event)" accept=".csv">

然后在组件或服务中使用它：

import { Component } from '@angular/core';
import { Papa } from 'ngx-papaparse';

@Component({
  ...
})
export class AppComponent {

    constructor(private papa: Papa) {

        // TEST IF YOUR PARSER IS WORKING FINE
        const csvData = '"Hello","World!"';

        this.papa.parse(csvData,{
            complete: (result) => {
                console.log('Parsed: ', result);
            }
        });
    }

  // LOAD CSV FILE FROM INPUT
  fileChangeListener($event: any): void {

    const files = $event.srcElement.files;

    if (files !== null && files !== undefined && files.length > 0) {
      this.selectedCSVFileName = files[0].name;

      const reader: FileReader = new FileReader();
      reader.readAsText(files[0]);
      reader.onload = e => {

        const csv = reader.result;
        const results = this.papa.parse(csv as string, { header: false });

        // VALIDATE PARSED CSV FILE
        if (results !== null && results !== undefined && results.data !== null &&
          results.data !== undefined && results.data.length > 0 && results.errors.length === 0) {
          this.isCSV_Valid = true;

          // PERFORM OPERATIONS ON PARSED CSV
          let csvTableHeader = results.data[0];

          let csvTableData = [...results.data.slice(1, results.data.length)];

        } else {
          for (let i = 0; i < results.errors.length; i++) {
            console.log( 'Error Parsing CSV File: ',results.errors[i].message);
          }
        }
      };
    } else {
      console.log('No File Selected');
    }

  }
}

从'@angular/core'导入{Component}；
从“ngx papaparse”导入{Papa}；
@组成部分({
...
})
导出类AppComponent{
构造函数（私有papa:papa）{
//测试解析器是否工作正常
const csvData=“‘你好’、‘世界’”；
这个.papa.parse（csvData{
完成：（结果）=>{
log（'Parsed:'，result）；
}
});
}
//从输入加载CSV文件
fileChangeListener（$event:any）：无效{
const files=$event.srcmelement.files；
if（files！==null&&files！==undefined&&files.length>0）{
this.selectedCSVFileName=文件[0]。名称；
常量读取器：FileReader=newfilereader（）；
reader.readAsText（文件[0]）；
reader.onload=e=>{
const csv=reader.result；
const results=this.papa.parse（csv作为字符串，{header:false}）；
//验证已解析的CSV文件
if（results！==null&&results！==undefined&&results.data！==null&&
results.data！==未定义&&results.data.length>0&&results.errors.length==0）{
this.isCSV_Valid=true；
//对解析的CSV执行操作
让csvTableHeader=results.data[0]；
让csvTableData=[…results.data.slice（1，results.data.length）]；
}否则{
for（设i=0；i

*注意：如果您不想使用库并手动解析CSV文件，您也可以这样做

---

以下是解析CSV文件而不使用任何库的参考博文：

这与。您可以使用完全使用pappa parse来读取csvi进行测试。不想将其上载到文件位置，我想在angular2本身中处理上载的.CSV文件。我怎么做？任何想法都无法使用Angular2操作上传的数据/csv，因为前端无法处理文件系统。您需要在服务器上构建逻辑，例如

nodejs

，

php

，

python

等@Harleen，它抛出以下错误**[ts]Type'string | ArrayBuffer'不能分配给Type'string'。类型“ArrayBuffer”不可分配给类型“string”。***Anjali:Append

as string

因此该行读取

let csv:string=reader.result as string
import { Component } from '@angular/core';
import { Papa } from 'ngx-papaparse';

@Component({
  ...
})
export class AppComponent {

    constructor(private papa: Papa) {

        // TEST IF YOUR PARSER IS WORKING FINE
        const csvData = '"Hello","World!"';

        this.papa.parse(csvData,{
            complete: (result) => {
                console.log('Parsed: ', result);
            }
        });
    }

  // LOAD CSV FILE FROM INPUT
  fileChangeListener($event: any): void {

    const files = $event.srcElement.files;

    if (files !== null && files !== undefined && files.length > 0) {
      this.selectedCSVFileName = files[0].name;

      const reader: FileReader = new FileReader();
      reader.readAsText(files[0]);
      reader.onload = e => {

        const csv = reader.result;
        const results = this.papa.parse(csv as string, { header: false });

        // VALIDATE PARSED CSV FILE
        if (results !== null && results !== undefined && results.data !== null &&
          results.data !== undefined && results.data.length > 0 && results.errors.length === 0) {
          this.isCSV_Valid = true;

          // PERFORM OPERATIONS ON PARSED CSV
          let csvTableHeader = results.data[0];

          let csvTableData = [...results.data.slice(1, results.data.length)];

        } else {
          for (let i = 0; i < results.errors.length; i++) {
            console.log( 'Error Parsing CSV File: ',results.errors[i].message);
          }
        }
      };
    } else {
      console.log('No File Selected');
    }

  }
}