無法返回在AngularJS服務中的fileReader結果的值

Question

我試圖編寫一個從HTML輸入元素讀取圖像文件的服務。我希望此服務使用讀取映像文件（base64字符串）中的更新屬性返回HTML img對象。現在這是我的服務是：

.service('ReadLocalImageService', [function() { 

    this.openLocalImage = function (file) { 
     var img = document.createElement("img"); 
     var fileReader = new FileReader(); 
     fileReader.onload = function (e) { 
      img.src = e.target.result; 
     }; 
     fileReader.readAsDataURL(file); 
     return img.src; 
    }; 

}]); 

在這種情況下，img.src返回空的，就像這樣：

如果我把一個console.log(img.src)的fileReader.onload裏面，它打印出我想要的東西。看起來功能openLocalImage正在返回img.src，然後e.target.result被分配給它。

我無法解決這個問題，也找不到關於此問題的正確主題。任何人都可以幫我解決這個問題，或者解釋爲什麼它不起作用？

Answer 1

它是因爲img尚未加載。這裏是一個解決方案

.service('ReadLocalImageService', [function() { 

    this.openLocalImage = function (file, callback) { 
     var img = document.createElement("img"); 
     var fileReader = new FileReader(); 
     fileReader.onload = function (e) { 
      img.src = e.target.result; 
      callback(img.src); 
     }; 
     fileReader.readAsDataURL(file); 
    }; 

}]); 

我們將通過一個callback功能和接收img.src爲PARAM。使用它

ReadLocalImageService.openLocalImage(myImage, function(imgSrc) { 
    // use imgSrc 
});