如何從FileReader獲取數據

Question

我需要FileReader API的一些幫助。有沒有辦法如何從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獲取更多信息和互動的例子。