Функция внутри filereader.onload не выполняется в javascript

Question

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

Проблема заключается в коде в строке this.addContentAttachment (this.mimeType, this.base64Url) не выполняется

getBase64(file: any) { 
    var reader:FileReader = new FileReader(); 
    reader.onload = function (readerEvt: any) { 
     var binaryString = readerEvt.target.result; 
     this.base64Url = binaryString; 
     this.mimeType = this.base64Url.substring(this.base64Url.lastIndexOf("data") + 5, this.base64Url.lastIndexOf(";")); 
     this.base64Url = this.base64Url.substring(this.base64Url.lastIndexOf("base64") + 7); 
     this.addContentAttachment(this.mimeType,this.base64Url); 
    }; 

    reader.readAsDataURL(file); 

    reader.onerror = function (error) { 
     console.log('Error: ', error); 
    }; 

    } 

Answer 1

Он терпит неудачу в OnLoad обратного вызова из-за изменившийся контекст (this). JavaScript изначально изменяет контекст в обратном вызове. В вашем случае в onload this это то же самое, что и reader. Вы должны привязать правильный контекст.

РЕШЕНИЕ 1 Вы можете привязать правильный контекст к переданной функции методом привязки к этой функции.

getBase64(file: any) { 
    var reader: FileReader = new FileReader(); 
    reader.onload = function (readerEvt: any) { 
     var binaryString = readerEvt.target.result; 
     this.base64Url = binaryString; 
     this.mimeType = this.base64Url.substring(this.base64Url.lastIndexOf("data") + 5, this.base64Url.lastIndexOf(";")); 
     this.base64Url = this.base64Url.substring(this.base64Url.lastIndexOf("base64") + 7); 
     this.addContentAttachment(this.mimeType, this.base64Url); 
    }.bind(this); // We forced that when function will be called this will be current this. 

    reader.readAsDataURL(file); 

    reader.onerror = function (error) { 
     console.log('Error: ', error); 
    }; 

} 

РЕШЕНИЕ 2 То же самое будет решена self переменной в родительской области от обратного вызова. Мы используем переменную self для хранения правильного контекста, а затем мы используем ее в обратном вызове вместо стандартного («corrupted» this).

getBase64(file: any) { 
    var reader: FileReader = new FileReader(); 

    var self = this; // create self with right this 
    reader.onload = function (readerEvt: any) { 
     var binaryString = readerEvt.target.result; 
     self.base64Url = binaryString; // using self instead this 
     self.mimeType = self.base64Url.substring(self.base64Url.lastIndexOf("data") + 5, self.base64Url.lastIndexOf(";")); 
     self.base64Url = self.base64Url.substring(self.base64Url.lastIndexOf("base64") + 7); 
     self.addContentAttachment(self.mimeType, self.base64Url); 
    }; 

    reader.readAsDataURL(file); 

    reader.onerror = function (error) { 
     console.log('Error: ', error); 
    }; 

} 

РЕШЕНИЕ 3 (благодаря @Aleksey L.) машинописи можно автоматизировать решение 2 по их собственным синтаксисом. Вы можете попробовать это и увидеть результат в игровой площадке, он делает то же самое, что описано в решении 2, но переменная называется _this вместо self.

getBase64(file: any) { 
    var reader: FileReader = new FileReader(); 
    reader.onload = (readerEvt: any) => { 
     var binaryString = readerEvt.target.result; 
     this.base64Url = binaryString; 
     this.mimeType = this.base64Url.substring(this.base64Url.lastIndexOf("data") + 5, this.base64Url.lastIndexOf(";")); 
     this.base64Url = this.base64Url.substring(this.base64Url.lastIndexOf("base64") + 7); 
     this.addContentAttachment(this.mimeType, this.base64Url); 
    }; 

    reader.readAsDataURL(file); 

    reader.onerror = function (error) { 
     console.log('Error: ', error); 
    }; 

}