如何从FileReader事件中设置Component的属性值

Question

我有这个组件:

export class FileFormComponent {
  _base64: string;

 handleFile($event){
   var input = $event.target;
   var reader = new FileReader();
   reader.onloadend = function() {
     this._base64 = reader.result
   }
   reader.readAsDataURL(input.files[0]);
   console.log(this._base64);
 }
}

问题是console.log(this._base64)日志undefined.看来this里面的onloadend事件并不是指组件的上下文.如何_base64从FileReader onloadend事件内部设置属性的值.

Answer 1

我会使用箭头功能.这样你就可以使用lexical this(对应于组件实例):

reader.onloadend() = () => {
  this._base64 = reader.result
}

有关详细信息,请参阅此链接:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions