отладка обработчика FileReader Api как вложенной функции - PullRequest
0 голосов
/ 12 апреля 2019

Мне нужно загрузить файл, но я также не могу загрузить имя файла. Html:

<input type='file' onChange={(e) => this.onSelectFile(e.target.files[0])} />

В конечном итоге этот код запускается при нажатии кнопки «Отправить»:

UploadFile(inputfile) {
    const reader = new FileReader()

    function onloadHandler(event){
        console.log('inputfile=' + JSON.stringify(inputfile))
        console.log('event.target=' + JSON.stringify(event.target))
        console.log('event.target.result=' + event.target.result.substring(0, 50))
        alert('function onloadHandler')//debug, test
        myfunction(inputfile, event.target.result)
    }

    // install the handler on the reader
    reader.onload = onloadHandler

    // start reading the text file
    reader.readAsText(inputfile)
}

, где inputfile имеет значение e.target.files[0] из html, например abc.txt.

Проблема в том, что в onloadHandler значение inputfile пусто. Ничего страшного, но отладка сложна, потому что точка останова в этом обработчике не работает. В качестве обходного пути работает alert (), а console.log () выдает небольшие фрагменты информации.

Я отлаживаю в Chrome с его инструментами разработки.

Без предупреждения выходные данные console.log будут мигать и исчезать без возможности чтения, поскольку приложение продолжает отображать какую-то другую страницу вывода.

Моя вторая проблема связана с «замыканиями». Я пытаюсь понять, что вложенная функция, такая как обработчик, имеет доступ к переменным во внешней функции, например, «inputfile». Но это не работает, оно пустое, когда console.log печатает его.

Это, вероятно, связано с асинхронным запуском считывателя. Когда считыватель закончит чтение содержимого файла и вызовет обработчик, переменная inputfile может больше не присутствовать.

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

Итак, как установить точку останова внутри обработчика и как получить имя файла там ?????

...