React 应用程序 - 在没有服务器的情况下将 JSON 文件上传并读取到变量中？

Question

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

没有服务器可以吗？

也就是说，我也尝试过使用 Express/Cors 服务器，但它有点超出我的驾驶室，我不确定如何在该编辑器将要安装的生产域上安装/运行居住。

Answer 1

输入文件类型并维护状态并在 onChange

时更新状态

working demo is here

代码片段

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

React 应用程序 - 在没有服务器的情况下将 JSON 文件上传并读取到变量中？

React app - upload and read JSON file into variable without a server?

upload

express

reactjs