如何使用 angular 上傳 csv 並使用 express API 解析數據並發送響應

Question

我正在嘗試發送 csv 文件來表達 api，M 在前端使用 angular 這是示例代碼 - app.component.html 文件

<div>
  <h1 style="text-align:center">CSV File Upload</h1>
  <form enctype="multipart/form-data"> 
      <input type="file" name="csvreport" id="csvreport" (change)="fileupload($event.target.files)">
  </form>
</div>

app.component.ts 文件

import { Component } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  constructor(private http: HttpClient) {}

  fileupload(files: FileList) {
    let file: File = files.item(0);
    let formData = new FormData();

    formData.append("file", file, file.name);
    this.http.post('http://localhost:5000/chartreportx/us-central1/chartreportapi/reportfile', formData)
    .subscribe(data=>{console.log(JSON.stringify(data))}, err=>{console.log(err)});
    console.log(JSON.stringify(file.name));
  }
}

我懷疑問題出在 api 上，我嘗試了多種方法來以正確的方式獲取 formdata 解析，但都給出了空結果，最后我得到了數組緩沖區作為輸出，但數組緩沖區仍然無效

快速API：

import * as functions from 'firebase-functions';
import * as express from "express";
import * as bodyParser from "body-parser";
import * as csvtojson from 'csvtojson';
import * as file_upload from 'express-fileupload';


const app = express();
app.use(file_upload())
app.use(bodyParser.json());
app.use(
  bodyParser.urlencoded({
    extended: false
  })
);
app.use(function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  res.setHeader(
    "Access-Control-Allow-Methods",
    "POST, GET, PATCH, DELETE, OPTIONS"
  );
  next();
});

app.get('/',(req, res) =>{
    res.status(200).json({chartreportapi:'works'});
})


app.post('/reportfile', (req, res)=>{
    let csvDataBuffer = JSON.stringify(req.body);
    let csvData = JSON.parse(csvDataBuffer).data;
    let csvDataString = csvData.toString('utf8')
    console.log(csvData.toString('utf8'));
    return csvtojson().fromString(csvDataString).then(json => {return res.status(201).json({csv:csvDataString, json:json})})

})

exports.chartreportapi = functions.https.onRequest(app)

我用這個 API 得到的輸出如下，但不是想要的結果：

{"csv":"45,45,45,45,45,45,87,....","json":[]}

也檢查了很多關於這個問題的 SO 問題，但沒有找到任何合適的解決方案，請讓我知道出了什么問題，還需要任何進一步的細節

Answer 1

我沒有得到確切的問題，但我發現使用 angular 發送原始文件數據有點嘈雜，所以我在將數據發送到 API 之前將其轉換為字符串-

方法在 app.component.ts 文件中更新

fileupload(files: FileList) {
    if (files && files.length > 0) {
      let file: File = files.item(0);
      let fileReader: FileReader = new FileReader();
      fileReader.readAsText(file);
      fileReader.onload = ev => {
        let csvdata = fileReader.result.toString();
        let body = {data:csvdata};
        return this.http.post('apiurl',body)
         .subscribe((data:any)=>console.log(JSON.stringify(data.json)));
      };
    }
  }

現在我以字符串格式獲取數據，所以現在很容易將字符串轉換為 json

API方法更新-

 app.post('/reportfile', (req, res)=>{
      let csvDataBuffer = JSON.stringify(req.body);
      let csvData = JSON.parse(csvDataBuffer).data;
      let csvDataString = csvData.toString("utf8");
        return csvtojson()
         .fromString(csvDataString)
         .then(json => {
           return res.status(201).json({csv:csvDataString, json:json})
          })
     })

通過這種方式，我能夠使用 API 將 csv 文件轉換為 json 數據，同樣的 csv 文件也可以在客戶端轉換為 json，但要求是在 API 上執行