angular Directive - 文件读取器未在文件加载时触发..

Question

我正在尝试读取angularjs中上传的图像文件的数据。但正如预期的那样，文件阅读器onload功能无效。

任何人都可以帮我解决此问题并阅读图片文件以获取相关数据。

这是我的代码：

app.directive('uploadImageFile', function () {

  return {

    link : function ( scope, element, attrs ) {

      var inputFile = element.find('.upload-field');

       element.on('click', function () {

         inputFile[0].click();

       });

       inputFile.on('change', function () {


            var reader = new FileReader();

                    reader.onload = function ( loadEvent ) {

                          console.log("load event", loadEvent.target.result); //nothing consoling here

           }

       })

    }

  }

})

Live Demo

Answer 1

您没有添加触发加载事件的readAsDataURL api和更改时收到的event对象

更正后的代码： Plunkr

inputFile.on('change', function (e) {
       console.log("Changed");
       var reader = new FileReader();
       reader.onload = function ( loadEvent ) {
          console.log("load event",   loadEvent.target.result);
       }
       reader.readAsDataURL(e.target.files[0]);
})