Question

我学习了如何为前端开发创建简单的react组件。但是，当我尝试在控制台上将上载的csv文件内容呈现为json输出时，我的第一个react组件起作用了，但我无法产生这样的输出。

目标：

我想在服务器上将上载csv文件的内容呈现为json的输出。我的最终目标是要通过获取REST API将此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输出？基于上述尝试，有什么想法可以做到这一点？预先感谢！

更新：

我的react组件仅允许我浏览要上传的csv文件，但其内容始终未呈现。有人可以帮助我如何将上传的文件内容呈现为json输出吗？

更新2 ：

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

Answer 1

您的反应部分正确。您只是不知道如何在浏览器中读取文件的内容。就是这样。

Expanded

清除了阻止程序。我将留给您了解如何将Column转到某个视图并进行渲染。

如何在React组件上将上传的CSV文件内容呈现为JSON输出

1 个答案: