React：通过对话框打开（.json）文件并读取内容

Question

我似乎无法弄清如何加载本地的 .json 文件并读取内容，以便可以将其转储到某个“状态”中。

到目前为止，代码如下：

import React, { Component } from 'react'
import Files from 'react-files'

class LoadFile extends Component {
  render() {
    return (
      <div className="files">
        <Files
          className="files-dropzone"
          onChange={file => {
            console.log(file)
          }}
          onError={err => console.log(err)}
          accepts={['.json']}
          multiple
          maxFiles={3}
          maxFileSize={10000000}
          minFileSize={0}
          clickable
        >
          Drop files here or click to upload
        </Files>
      </div>
    )
  }
}

export default LoadFile

记录的对象并不包含其中嵌入的任何数据。

[Object]
  0: Object
    id: "files-1"
    extension: "json"
    sizeReadable: "288B"
    preview: Object
      type: "file"

- Norfeldt

Answer 1

像 @dkniffin 所说，react-files背后的是DataTransfer。

您可以利用FileReader API获取文件内容并以JSON格式解析它，您可以在下面CodeSandbox的控制台部分看到结果：

constructor() {
  super();
  this.state = {
    jsonFile: {}
  };

  this.fileReader = new FileReader();

  this.fileReader.onload = (event) => {

    // or do whatever manipulation you want on JSON.parse(event.target.result) here.

    this.setState({ jsonFile: JSON.parse(event.target.result) }, () => {
      console.log(this.state.jsonFile);
    });
  };

}

...

render() {

    return (
       <div className="files">
         <Files

          ...

          onChange={file => {
              // we choose readAsText() to load our file, and onload
              // event we rigister in this.fileReader would be triggered.
              this.fileReader.readAsText(file[0]);
          }}
         >
           Drop files here or click to upload
         </Files>
       </div>
    );
}

- Carr

---

非常感谢！我实际上尝试过使用fileReader，但我发现我的语义是错误的。 - Norfeldt

Answer 2

很抱歉，我无法给你一个完整的答案。但是，在深入研究了一下react-files的源代码后，我找到了这行代码：

let filesAdded = event.dataTransfer ? event.dataTransfer.files : event.target.files

看起来filesAdded将是一个FileList，它基本上只是一个File对象的数组。不幸的是，我没有看到从File对象中获取内容的方法。也许其他人可以帮忙解决这个问题。

- dkniffin