加载本地Json文件并使用Javascript将其存储在变量中

Question

我不是开发人员，我只是喜欢玩JavaScript！在这个隔离期，除了无所事事，我开始修改ReactJS。我创建了一个小应用程序，可将数据保存在JSON文件中！由于它全部是本地的，所以我不需要node.js和后端技术。经过一系列功能后，JSON文件将通过Blob在本地保存。如何创建一个事件，通过从计算机的文件系统中选择该文件来导入该文件？如果我在列表import data from './data.json';的顶部写上，那就可以了！我宁愿选择能够从文件系统上的任何位置上传文件。

这使我可以将文件保存在所需的位置：

 let file = new Blob([fileJSON], {type: 'application/json'});
     let a = document.createElement("a");
     a.href = URL.createObjectURL(file);
     a.download = file;
     a.click();

如何通过每次选择路径来加载它？

loadDatas=()=>{
  const dataJ = //something that allows me to go and choose the json file from my computer wherever it is

  const parseIt = $.parseJSON(dataJ);

        // do something

}

非常感谢，希望您一切都好！

Answer 1

在您的服务器上，请确保您的文件（data.json）是静态提供的。

然后您可以提出一个ajax请求

fetch('/path/to/data.json')
    .then(res =>
        res.json())
    .then(data =>
        console.log(data);
        // or do anything with data. 
    );

Answer 2

您可以尝试以下代码：

openFileLoadingDialog = () => {
    this.inputRef.current.click()
}

readURL=(e)=>{
    let file = URL.createObjectURL(e.target.files[0])
    if(this.state.file !== file)
    this.setState({
        file : file
    })
}

render(){

     return(
         <div>
             <input type="file" ref={this.inputRef} onChange={this.readURL}/>
             <Button onClick={this.openFileLoadingDialog}>
                   Open File
             </Button>
         </div>
     )
}