Функция загрузки FileReader не срабатывает

Подводя итог моей проблеме, мне нужно прочитать файл csv с устройства Android. В настоящее время я использую FileReader из JavaScript. Мой код был написан месяц назад, и он работал, но когда я вернулся, чтобы проверить функциональность, я увидел, что моя функция onload даже не срабатывает.

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

readCSVFile(input: HTMLInputElement) {

    var content = this.csvContent;
    const files = input.files;
    console.info("files: ", files);

    if (files && files.length) {

      const fileToRead = files[0];
      console.info("step1");
      var fileReader = new FileReader();

      console.info("state 1: ", fileReader.readyState); //prints undefined, but should have been "0"

      fileReader.onload = this.onFileLoad.bind(this);
      console.info("fileReader: ", fileReader);
      fileReader.readAsText(fileToRead, "UTF-8");
      console.info("fileReader 2: ", fileReader.onload);
      console.info("state 3: ", fileReader.readyState);
   }
}

Я не думаю, что файл onFileLoad актуален, но его первая строка — это console.info("something"), и я не вижу этого в своей консоли. Вот несколько выводов из консоли:

fileReader 2:  ƒ (fileLoadedEvent) {
        console.info("step2");
        var textFromFileLoaded = fileLoadedEvent.target.result;
        this.csvContent = textFromFileLoaded;
        console.info("Continut: ", t…

state 1:  undefined

Какой браузер? Что выводит console.info(FileReader.toString())?

Kaiido 24.06.2019 12:29
"function () { this._readyState = 0; this._error = null; this._result = null; this._progress = null; this._localURL = ''; this._realReader = origFileReader ? new origFileReader() : {}; // eslint-disable-line new-cap }" – Хром
Laurentiu Amzarescu 24.06.2019 12:30

Вот ваша проблема: вы имеете дело с дрянным полифиллом.

Kaiido 24.06.2019 12:31

Фрагмент не является допустимым JavaScript. Что это, псевдокод?

amn 24.06.2019 12:35

Это TypeScript.

Laurentiu Amzarescu 24.06.2019 12:36
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
5
354
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Можно попробовать без закрытия. То есть: fileReader.onload = function(ev){ //вот ваш код }.bind(this);

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

Kaiido 24.06.2019 12:33

Учитывая, что результат FileReader.toString() равен судя по твоему комментарию

"function () {
  this._readyState = 0;
  this._error = null;
  this._result = null;
  this._progress = null;
  this._localURL = '';
  this._realReader = origFileReader ? new origFileReader() : {}; // eslint-disable-line new-cap
}"

Это означает, что вы имеете дело не с FileReader веб-API, а с каким-то объектом-оболочкой.

Поскольку он переопределяет исходное пространство имен без исходного поведения, на вашем месте я бы просто избавился от всего, что устанавливает эту оболочку. Если вы действительно хотите сохранить этот дерьмо, кажется, что его свойство ._realReader будет настоящим FileReader, с которым вы сможете нормально взаимодействовать.

Другие вопросы по теме