无法返回在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 
});