Как отобразить загруженное содержимое CSV-файла в виде вывода json в компоненте react

ProgramBox

Как отобразить загруженное содержимое CSV-файла в виде вывода json в компоненте react

Post author:admin
Запись опубликована:24 августа, 2022
Post category:Вопросы по программированию

#javascript #json #reactjs

Вопрос:

Я узнал, как создать простой компонент react для моей интерфейсной разработки. Однако мой первый компонент react работает, когда я попытался отобразить csv содержимое загруженного файла в виде json выходных данных на консоли, я не смог создать такой вывод.

цель:

Я хочу отобразить содержимое загруженного csv файла на сервере в качестве json выходных данных. Моя конечная цель состоит в том, что я хочу передать этот json вывод в серверную базу данных, используя REST API.

моя попытка:

 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:

разъяснение для моей цели: я хочу, чтобы пользователь просматривал прямо в браузере jsonified содержимое выбранного csv-файла, одновременно загружая json на сервер.

1. Вам нужно предоставить минимальный рабочий пример, переполнение стека — это не «запрос на код сайта». Вам нужно сообщить, что вы сделали и какие ответы вы получаете. Посмотрите на Mozilla developer, чтобы начать, и попробуйте что-нибудь, прежде чем публиковать здесь: developer.mozilla.org/en-US/docs/Web/API/FileReader И developer.mozilla.org/en-US/docs/Web/API/File /…

2. @Marco да, я привел минимальный рабочий пример выше, выше компонент react работает, но не может отображать содержимое файла в формате json, выше кода я не включил, как отображать вывод json, потому что мой код не работал.

3. Мне неясно, каковы ваши ожидаемые результаты по сравнению с фактическими результатами. Вы сказали, что хотите отобразить csv в формате json (что, я полагаю, означает преобразование csv в json) на сервере , но вы показываете код react на стороне клиента. Я в замешательстве. Похоже, вы используете слово «визуализированный» не так, как я бы его использовал. Можете ли вы уточнить, что вы подразумеваете под «визуализацией». Вам просто нужно установить тип mime для загруженного ресурса на application/json ? Ваша проблема мне пока не ясна.

4. Проблема @Wyck в том, что выше компонент react не отображал вывод загруженного CSV-файла в браузере, интересно, как это сделать. Да, я хочу проанализировать csv в json с помощью компонента react. Можете ли вы предоставить какое-либо проницательное решение? Бьюсь об заклад, над попыткой следует добавить немного больше. Спасибо

5. Итак, я предполагаю, что вы хотите, чтобы пользователь просматривал прямо в браузере содержимое выбранного csv-файла в формате json, одновременно загружая json на сервер.

Ответ №1:

Вы правильно поняли часть с реакцией. Вы просто не знаете, как прочитать содержимое файла внутри браузера. Вот как это сделать.

 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 изображение в какой-то вид и визуализировать его.

1. можете ли вы создать полностью рабочее решение, включая мою часть? как использовать вашу функцию в моем компоненте? Да, я знаю, как преобразовать csv в json.

2. Я набрал его на телефоне, если что-то пропустил, погугли FileReader

3. Вы объявляете его как другой метод компонента, затем вызываете его внутри uploadFile , передавая то же file самое в него, это также асинхронный метод, так что не беспокойтесь.

4. Я ничего не знаю о структуре вашего json, как я могу помочь вам с представлением? Плюс я печатаю на мобильном телефоне, просто избавьте меня от этой части, пожалуйста.

5. Я оставил csv файл и ожидаемый формат json прямо здесь: файл json , не могли бы вы предоставить полностью рабочее решение? Честно говоря, я немного растерялся. Спасибо

Метки: Как отобразить загруженное содержимое CSV-файла в виде вывода json в компоненте react