Как загрузить файл в TypeScript
Я новичок в Typescript и у меня проблема с синтаксисом. Я хочу загрузить выбранный пользователем файл (не используя JQuery) и пока распечатать результаты на консоли. Я следовал некоторым руководствам в JS, но безуспешно. Это то, что у меня есть до сих пор.
index.html
<input type = "file" id = "file-input" >
index.ts
document.getElementById("file-input").addEventListener("change", e => {
var reader = new FileReader();
var self = this;
reader.onload = file => {
var contents: any = file.target;
self.text = contents.result;
};
console.info(self.text.toString());
}, false);
Это дает следующую ошибку в отчете консоли:
Uncaught TypeError: Cannot read property 'toString' of undefined
at HTMLInputElement.<anonymous>
Я не совсем уверен, как получить текст из буфера и правильно ли я его настраиваю.
ОБНОВИТЬ: Текущий код с изменениями:
document.getElementById("file-input").addEventListener("change", async (e) => {
var file = (<HTMLInputElement>e.target).files[0];
var reader = new FileReader();
reader.onload = file => {
var contents: any = file.target;
this.text = contents.result;
console.info(this.text.toString());
};
}, false);
Переместите console.info внутри обратного вызова, который называется асинхронно, когда файл, наконец, загружен, спустя много времени после возврата функции прослушивателя события изменения ввода файла.
Кроме того, эта переменная self не нужна. Просто используйте this: это то, что позволяют функции стрелок.
Я думал, что это так, @JBNizet, я переместил console.info внутрь обратного вызова. Однако тогда я не получаю никакого отображения консоли (или ошибок). Я исправил использование переменной self.
Это потому, что ты никогда не читал файл. Все, что вы делаете, это говорите, что делать, когда это прочитано. Но вам нужно вызвать чтение: developer.mozilla.org/en-US/docs/Web/API/FileReader/onload
В этом есть смысл. Пожалуйста, простите мою тупость. Я обновил модифицированный пример. Мне пришлось использовать e.target, чтобы пройти компиляцию. Я на правильном пути?
Ответы 1
Сосредоточьтесь на коде
reader.onload = file => {
var contents: any = file.target;
self.text = contents.result;
};
console.info(self.text.toString());
Порядок выполнения, который, по вашему мнению, имеет:
reader.onload = file => {
var contents: any = file.target;
self.text = contents.result; // FIRST
};
console.info(self.text.toString()); // SECOND
Порядок исполнения в реальности:
reader.onload = file => {
var contents: any = file.target;
self.text = contents.result; // SECOND
};
console.info(self.text.toString()); // FIRST
Следовательно, вы получаете сообщение об ошибке, поскольку .text не назначено ко времени запуска self.text.toString.
ИСПРАВИТЬ
В одну сторону:
reader.onload = file => {
var contents: any = file.target;
self.text = contents.result; // FIRST
console.info(self.text.toString()); // SECOND ?
};
Вам нужно дождаться его загрузки.