Как получить данные из FileReader

Question

Мне нужна небольшая помощь с API FileReader. Есть ли способ получить данные из FileReader за его пределами. У меня есть «класс» с методом, где изображение читается с помощью FileReader, и я хочу поместить данные изображения в локальную переменную класса (как показано в следующем коде).

Я знаю, что FileReader работает асинхронно, и мое решение неверно. Есть ли способ заставить его работать? Спасибо.

CanvasState.prototype.addImage = function(inputFile) { 
    var file = inputFile; 
    var reader = new FileReader(); 
    reader.onload = this.loadImageData; 
    reader.readAsDataURL(file); 
} 

CanvasState.prototype.loadImageData = function(e) { 
    this.hasImage = true; 
    this.imageData = e.target.result; 
} 

Answer 1

Попробуйте это:

CanvasState.prototype.addImage = function(inputFile) { 
    var file = inputFile, self = this; 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
      self.hasImage = true; 
      self.imageData = e.target.result; 
     }; 

    reader.readAsDataURL(file); 
} 

Answer 2

Это проблема с тем, как this устанавливается в функции. Когда вы делаете:

foo.bar(); 

this внутри bar() будет foo. Но если вы делаете:

var bar = foo.bar; 
    bar(); 

this будет глобальный объект.

В вашем случае проблема заключается в том, что при установке reader.onload вы устанавливаете его на функцию, выведенную из прототипа CanvasState. Когда читатель загружается, а затем вызывает эту функцию, это похоже на пример выше, где this будет глобальным объектом, а не тем же, что и внутри addImage.

Чтобы исправить это, вы можете использовать метод bind() для создания новой функции, которая вызовет loadImageData с ожидаемым this.

В основном, изменения:

... 
reader.onload = this.loadImageData; 
... 

к:

... 
reader.onload = this.loadImageData.bind(this); 
... 

Выезд JavaScript Function bind для получения дополнительной информации и интерактивных примеров.