//This is frontend

import React, { useState } from "react";
import axios from "axios";
import "./App.css";

const App = () => {
  const [logFile, setLogFile] = useState<File | null>(null);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setLogFile(e.target.files![0]);
  };

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    try {
      const formData = new FormData();
      formData.append("logFile", logFile!);
      console.log(formData);
      const response = await axios.post(
        "http://localhost:3001/logs",
        formData,
        {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        }
      );
      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <>
      <div className="App">
        <h1>Upload file</h1>
        <form onSubmit={handleSubmit}>
          <div>
            <input type="file" onChange={handleChange} />
          </div>
          <button type="submit">Submit</button>
        </form>
      </div>
    </>
  );
};

export default App;




//This is backend
const express = require('express');
const app = express();
const port = 3001;
const winston = require('winston');
const cors = require("cors")

app.use(cors())

const logger = winston.createLogger({
  transports: [
    new winston.transports.File({
      level: 'error',
      filename: 'error.log',
      handleExceptions: true,
      json: true,
      maxsize: 5242880,
      maxFiles: 5,
      colorize: false
    }),
    new winston.transports.File({
      level: 'warn',
      filename: 'warning.log',
      handleExceptions: true,
      json: true,
      maxsize: 5242880,
      maxFiles: 5,
      colorize: false
    })
  ],
  exitOnError: false
});

app.use(express.json());

app.get("/", (req, res) => {
  res.json({ "message": req.body.logFile })
})

app.post('/logs', (req, res) => {
  const logFile = req.body.logFile;
  const errorLogs = [];
  const warnLogs = [];

  // Log error and warn messages to separate files
  logFile?.forEach(log => {
    if (log.level === 'error') {
      logger.error(log);
      errorLogs.push(log);
    } else if (log.level === 'warn') {
      logger.warn(log);
      warnLogs.push(log);
    }
  });

  res.json({ errorLogs, warnLogs });
});

app.listen(port, () => {
  console.log(`Server is listening at http://localhost:${port}`);
});

我正在构建一个日志解析器来记录错误和警告级别，使用react js上传文件并从express服务器返回过滤后的数据（作为json）。但我得到的formData对象为空，而logfile在react js前端的控制台中显示上传的fie
我想将日志文件从前端发送到后端，并将过滤后的json数据从后端返回到前端