如何在 React 中以表单形式接收和读取 .log 扩展文件？

Question

import React from "react";
import "./App.css";

function App() {
  const showFile = () => {
    if (window.File && window.FileReader && window.FileList && window.Blob) {
      const preview = document.getElementById("show-text");
      cosnt file = document.querySelector("input[type=file]").files[0];
      const reader = new FileReader();

      const logFile = /log.*/;

      if (file.type.match(logFile)) {
        reader.onload = function (event) {
          preview.innerHTML = event.target.result;
        };
      } else {
        preview.innerHTML = "<span class='error'>It doesn't seem to be a log file!</span>";
      }
      reader.readAsText(file);
    }
  };

  return (
    <div className="App">
      <input type="file" onChange={showFile} />
      <div id="show-text">Choose text File</div>
    </div>
  );
}

export default App;

我希望能够从输入字段中读取日志文件并进行额外查询。例如，在读取日志文件后，我想统计调用了多少个“/about”路由，以及根据哪台机器发送 GET 请求，调用的唯一性。

log file

Answer 1

更新

我对这个问题的理解有误，但这里有一个解决方案：（您可以在parseFile() 函数内进行任何文件操作）

链接到 CodeSandbox (https://codesandbox.io/s/logs-viewer-file-chooser-crq8g)

import { useState } from "react";
import { LazyLog } from "react-lazylog";

export default function App() {
  const [logContent, setLogContent] = useState(null);

  function renderLogs() {
    return (
      <LazyLog extraLines={1} enableSearch text={logContent} caseInsensitive />
    );
  }

  const parseFile = async (fileContent) => {
    // Do whatever you want to do with the content of the file
    console.log(fileContent);
  };

  const showFile = async (e) => {
    const file = e.target.files[0];

    if (file) {
      const data = await new Response(file).text();
      await parseFile(data);
      setLogContent(data);
    }
  };

  return (
    <div className="app">
      <h1>Logs uploader</h1>

      <input type="file" accept=".log" onChange={showFile} />

      <hr className="divider" />

      <div className="log-container">
        {logContent ? renderLogs() : <h4>No logs</h4>}
      </div>
    </div>
  );
}

---

你可以试试这个库https://mozilla-frontend-infra.github.io/react-lazylog/，如果你在构建时没有访问权限，你需要获取.log文件。

import { LazyLog } from "react-lazylog";

export default function App() {
  const url = "https://online.com/file.log";

  return (
    <div style={{ height: 500, width: 902 }}>
      <LazyLog extraLines={1} enableSearch url={url} caseInsensitive />
    </div>
  );
}

查看沙盒https://codesandbox.io/s/logs-viewer-bsf9s