Как загрузить CSV с использованием угловых и анализ данных с помощью экспресс-API и отправленный ответ - PullRequest
Новая
       86

Как загрузить CSV с использованием угловых и анализ данных с помощью экспресс-API и отправленный ответ

0 голосов
/ 23 октября 2018

Я пытаюсь отправить файл csv для выражения api, M с использованием углового интерфейса: вот пример файла code- 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, я пробовал несколько методов для правильного анализа синтаксических данных, но все дает нулевой результат, Наконец я получил буфер массива в качестве вывода, но все еще буфер массива недействительный

Express 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":[]}

Также проверил многоТАК вопросы по этой проблеме, но не нашли правильного решения, пожалуйста, дайте мне знать, что идет не так, также требуется дополнительная информация по этому

1 Ответ

0 голосов
/ 28 октября 2018

У меня не было точной проблемы, но я обнаружил, что отправка необработанных данных файла с использованием 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)));
      };
    }
  }

Теперь я получаю данные в формате строки, поэтому теперь легко преобразовать строку в метод API json

updated- 

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

Таким образом, я смог преобразовать CSV-файл в данные JSON с помощью API, этот же CSV-файл также можно преобразовать в JSON на стороне клиента, но требовалось сделатьпо API

...