React 应用程序 - 无需服务器即可将 JSON 文件上传并读取到变量中？

Question

我正在 React 中构建一个 JSON 编辑器，现在我只是从服务器上的静态文件夹中获取一个 json 文件并将其粘贴到一个变量中。我希望能够使用文件输入并选择任何 json 文件并将其读入变量。

没有服务器这可能吗？

也就是说，我也尝试使用 Express/Cors 服务器，但它有点超出我的驾驶范围，我不确定如何在此编辑器所在的生产域上安装/运行它。

Answer 1

有一个文件类型的输入并维护一个状态并更新状态 onChange

工作演示在这里

代码片段

import React, { useState } from "react";

export function Upload({ children }) {
  const [files, setFiles] = useState("");

  const handleChange = e => {
    const fileReader = new FileReader();
    fileReader.readAsText(e.target.files[0], "UTF-8");
    fileReader.onload = e => {
      console.log("e.target.result", e.target.result);
      setFiles(e.target.result);
    };
  };
  return (
    <>
      <h1>Upload Json file - Example</h1>

      <input type="file" onChange={handleChange} />
      <br />
      {"uploaded file content -- " + files}
    </>
  );
}