Доступ к переменной внутри функции загрузки FileReader в TS

Question

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

const reader: FileReader = new FileReader();
            reader.onload = function(e: any) {
                const imgBase64Path = e.target.result;
                this.documentBase64 = imgBase64Path;
                this.isImageSaved = true;
                this.documents.content = imgBase64Path.toString();
            };

, все переменные, объявленные внутри onload с использованием «this», не обновлялись снаружи. но когда я изменил код, например,

const reader: FileReader = new FileReader();
            const this_ = this;
            reader.onload = function(e: any) {
                const imgBase64Path = e.target.result;
                this_.documentBase64 = imgBase64Path;
                this_.isImageSaved = true;
                this_.documents.content = imgBase64Path.toString();
            };

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

Answer 1

Это проблема объема.

Вы можете использовать функцию стрелки (() => {}) Как показано ниже, чтобы сохранить это в области действия

const reader: FileReader = new FileReader();
            reader.onload = (e: any) => {
                const imgBase64Path = e.target.result;
                this.documentBase64 = imgBase64Path;
                this.isImageSaved = true;
                this.documents.content = imgBase64Path.toString();
            };