Мне нужно загрузить файл, но я также не могу загрузить имя файла. 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 может больше не присутствовать.
Я предполагаю, что в параметре события для обработчика имя файла присутствует где-то. Но я не нахожу информацию об этом, и у меня нет отладчика здесь.
Итак, как установить точку останова внутри обработчика и как получить имя файла там ?????