Javascript 如何在react组件上将上传的csv文件内容呈现为json输出

我学会了如何为我的前端开发创建简单的react组件。然而，我的第一个react组件可以工作，当我试图在控制台上将上传的

csv

文件内容呈现为

json

输出时，我无法生成这样的输出

目标：

import React, {Component} from 'react';

export default class UploadFile  extends Component {
    constructor(props) {
      super(props)
      this.uploadFile = this.uploadFile.bind(this);
    }
    uploadFile(event) {
        let file = event.target.files[0];
        console.log(file);
        if (file) {
          let data = new FormData();
          data.append('file', file);
        }
    }
    render() {
      return(
        <div className="Upload">
          <span>
          <input type="file"
          name="myFile"
          onChange={this.uploadFile} />
          </span>
        </div>
      ) 
    }
}

我想将服务器上上传的

csv

文件的内容呈现为

json

输出。我的最终目标是通过获取RESTAPI将这个

json

输出传递到后端数据库

我的尝试：

import React, {Component} from 'react';

export default class UploadFile  extends Component {
    constructor(props) {
      super(props)
      this.uploadFile = this.uploadFile.bind(this);
    }
    uploadFile(event) {
        let file = event.target.files[0];
        console.log(file);
        if (file) {
          let data = new FormData();
          data.append('file', file);
        }
    }
    render() {
      return(
        <div className="Upload">
          <span>
          <input type="file"
          name="myFile"
          onChange={this.uploadFile} />
          </span>
        </div>
      ) 
    }
}

import React，{Component}来自'React'；
导出默认类上载文件扩展组件{
建造师（道具）{
超级（道具）
this.uploadFile=this.uploadFile.bind（this）；
}
上载文件（事件）{
让file=event.target.files[0]；
console.log（文件）；
如果（文件）{
let data=new FormData（）；
data.append（'file'，file）；
}
}
render（）{
返回(
) 
}
}

有人能告诉我如何使上述组件正常工作吗？如何将上载的

csv

文件内容呈现为服务器上的

json

输出？基于上述尝试，有什么想法可以实现这一点吗？提前谢谢

更新：

import React, {Component} from 'react';

export default class UploadFile  extends Component {
    constructor(props) {
      super(props)
      this.uploadFile = this.uploadFile.bind(this);
    }
    uploadFile(event) {
        let file = event.target.files[0];
        console.log(file);
        if (file) {
          let data = new FormData();
          data.append('file', file);
        }
    }
    render() {
      return(
        <div className="Upload">
          <span>
          <input type="file"
          name="myFile"
          onChange={this.uploadFile} />
          </span>
        </div>
      ) 
    }
}

我的react组件只允许我浏览我想要上传的

csv

文件，但它的内容没有呈现出来。有谁能帮助我如何将上传的文件内容呈现为

json

输出

更新2：

import React, {Component} from 'react';

export default class UploadFile  extends Component {
    constructor(props) {
      super(props)
      this.uploadFile = this.uploadFile.bind(this);
    }
    uploadFile(event) {
        let file = event.target.files[0];
        console.log(file);
        if (file) {
          let data = new FormData();
          data.append('file', file);
        }
    }
    render() {
      return(
        <div className="Upload">
          <span>
          <input type="file"
          name="myFile"
          onChange={this.uploadFile} />
          </span>
        </div>
      ) 
    }
}

---

澄清我的目标：我希望用户在浏览器中预览所选csv文件的jsonified内容，同时将json上传到服务器。

您已经正确地使用了react部分。您只是不知道如何在浏览器中读取文件内容。这是怎么做的

readFileContent(file) {
  const reader = new FileReader();
  reader.onload = (event) => {
    const text = event.target.result;
    const json = csv2json(text);. // find a lib, or write one
    this.setState({ json });
  };

  reader.readAsText(file);
}

---

拦截器被清除。我将把它留给您去弄清楚如何将

json

转换为一些视图并进行渲染。

您需要提供一个最低限度的工作示例，堆栈溢出不是“要求代码站点”。你需要提供你已经做了什么，你得到了什么样的回应。在这里发布之前，请看mozilla developer开始并尝试一些东西：@Marco yes我提供了上面的最低工作示例，上面react组件可以工作，但不能将文件内容呈现为json，上面的代码我没有包括如何呈现json输出，因为我的代码不起作用。我不清楚您的预期结果与实际结果。您说过希望在服务器上将csv呈现为json（我假设这意味着将csv转换为json），但您显示的是客户端代码。我很困惑。你使用“呈现”这个词的方式和我使用它的方式几乎是不同的。你能澄清你所说的“渲染”是什么意思吗。您是否只需要将上传资源上的mime类型设置为

application/json

？您的问题我还不清楚。@Wyck问题在上面。react组件没有在浏览器上呈现上载的csv文件输出，我想知道如何做到这一点。是的，我想用react组件解析json上的csv。你能提供一些有见地的解决方案吗？我打赌应该在尝试上面再加一点。谢谢，我想您希望用户在浏览器中预览所选csv文件的json内容，同时将json上传到服务器。您能否制作包括我的部分在内的完整工作解决方案？如何在我的组件中使用您的函数？是的，我知道如何将csv解析为json。我在电话上键入了它，如果遗漏了什么，谷歌

FileReader

您将其声明为组件的另一个方法，然后在

uploadFile

中调用它，将相同的

文件传递到其中，这也是异步方法，所以不用担心。我不知道json的结构，我怎么帮你看风景？加上我在手机上打字，请把那部分留给我。我把
csv
文件和预期的json格式放在这里：，你能提供一个完全有效的解决方案吗？老实说，我有点迷路了。谢谢