使用 papaparse 从输入解析文件答案

【问题标题】：parse file from input with papaparse使用 papaparse 从输入解析文件
【发布时间】：2020-01-18 01:19:38
【问题描述】：

我正在尝试使用来自输入的文件更新图表。我用 Papaparse 解析文件。

chart.component.ts：

  update_chart(csvdata) {

    const jsonData = Papa.parse(csvdata);
    this.data1 = this.prepareData(jsonData.data);


    const self = this,
      chart = this.chart;

    chart.showLoading();

    setTimeout(() => {
      chart.hideLoading();

      self.chartOptions.series = [
        self.chartOptions.series[0],
        {
          data: self.data1
        }
      ];

      self.updateFromInput = true;
    }, 2000);
  }
}

chart.component.html：

<div class="boxChart__container">
    <div>
        <highcharts-chart
            id="container" 
            [Highcharts]="Highcharts"
            [constructorType]="chartConstructor"
            [options]="chartOptions"
            [callbackFunction]="chartCallback"
            [(update)]=updateFromInput
            [oneToOne]="true"
            style="width: 100%; height: 400px; display: block;">
        </highcharts-chart>

        <div class="form-group">
            <label for="file">Choose File</label>
            <input type="file" id="file" (change)="update_chart($event)">
        </div>
    </div>
</div>

但是，一旦我选择了我的文件，我就会收到这个错误：

错误类型错误：无法在“FileReader”上执行“readAsText”：参数 1 不是“Blob”类型。在 _global.. [as readAsText] (zone-evergreen.js:1354) 在 c._readChunk (papaparse.min.js:7) 在 c._nextChunk (papaparse.min.js:7) 在 c.stream (papaparse.min.js:7) 在 Object.parse (papaparse.min.js:7) 在 ChartComponent.update_chart (chart.component.ts:138) 在 Object.eval [as handleEvent] (ChartComponent.html:16) 在句柄事件（core.js:38098）在 callWithDebugContext (core.js:39716) 在 Object.debugHandleEvent [as handleEvent] (core.js:39352)

我不知道“不是类型 blob”是什么意思，以及为什么这与我的应用程序有关。有谁知道出了什么问题？

CSV 文件：

Tasks,Run,Count
task1,4.96,150
task2,156.166666666667,150
task3,279.369565217391,92
task4,1718,16
task5,2.375,16

我不能更改 csv，它必须是这样的。

我在这里重现了错误：https://codesandbox.io/s/angular-mntjy

【问题讨论】：

内注：作者昨天问了同样的问题，但是他不喜欢cmets和建议，所以他把它删除了，在一个新的ticket中再次提问。 @J.Doe，请尊重其他想帮助你的人，不要无缘无故删除他们的答案。
我承认这是一个错误！我没有得到任何答案，只有一条评论并没有真正帮助我……但我仍然很抱歉。我找到了我的问题的解决方案，所以我会在这里做一个答案，希望能帮助别人！

标签： angular highcharts papaparse

【解决方案1】：

update_chart 方法中的参数csvdata 是事件，但不是对文件（blob）的引用。更改参数名称并将文件引用提供给Papa.parse，如下所示。

update_chart(event) {    
    const jsonData = Papa.parse(event.files[0]);

【讨论】：

您可以记录事件参数以了解其内部结构
事件 {isTrusted: true, type: "change", target: input#file, currentTarget: input#file, eventPhase: 2, …}

【解决方案2】：

我为解决我的问题所做的是构建一个 FileReader：

  readDocument(fileChangeEvent: Event) {
    return new Observable<Object>(obs=>{
      const file = (fileChangeEvent.target as HTMLInputElement).files[0];
      let fileReader = new FileReader();

      fileReader.onload = (e) => {
        obs.next(fileReader.result);
      }
      fileReader.readAsText(file);  
  })

然后使用订阅中的文件。

this.readDocument(inputdata).subscribe(document=>{

【讨论】：