如何在 React / next.js 上讀取上傳的 json 文件的內容

Question

我的用戶將使用此按鈕上傳一個 json 文件（見下文）

然后我將獲取這個 json 文件並將其內容傳遞給變量（或狀態）。

let fileRef = useRef();

  const uploadHandler = async () => {
    await fileRef.click();
  };

  useEffect(() => {
    fileRef.addEventListener("change", () => {
      const file = fileRef.files[0];
      console.log(file);
    });
  }, []);

我的 console.log 看起來像這樣，

Answer 1

您需要一個文件輸入，以及輸入的 onChange 事件處理程序，因此當用戶上傳文件時，使用新的 FileReader 來讀取它。

import React, { useState } from "react";

export function Upload({ children }) {
  const [fileContent, setFileContent] = useState("");
  let fileRef = useRef();

  const readFile = event => {
    const fileReader = new FileReader();
    const { files } = event.target;

    fileReader.readAsText(files[0], "UTF-8");
    fileReader.onload = e => {
      const content = e.target.result;
      console.log(content);
      setFileContent(JSON.parse(content));
    };
  };

  return (
    <>
      <input ref={fileRef} type="file" onChange={readFile} />
      <button onClick={()=>fileRef.current.click()}>Upload<button/>
    </>
  );
}

Answer 2

通過使用灰質

import matter from "gray-matter";
// set directory
const directory = path.join(process.cwd(), "src", "data", "uploads");

export function getJsonData(fileName) {
    // assuming that fileName has extension too
     const filePath = path.join(directory, `${fileName}`);
     const fileContent = fs.readFileSync(filePath, "utf-8");
     // data is the metadata
     const { data, content } = matter(fileContent);
     console.log("data",data)
     console.log("content",content)
     
}