Angularjs实现多图片上传预览功能

最近要实现一个多图片上传的预览功能，网上有很多例子大多不太完整，我就把他们的整合了下并且加了一些功能和界面，我们只需要调用一条指令就可以实现，但传给后台还需要额外的代码，会在后面controller里介绍。不知道封装的是否符合标准，还希望大家一起讨论下,如果有时间封装下Angular4的图片上传和预览分享给大家。

图片上传的预览，我们最主要解决的是拿到input的on-change事件，再是读取图片，读取图片我们需要用到FileReader。

我们先写一个读取图片的服务，这是网上的一位大佬写的，我就直接拿了过来

<div class="jb51code">
<pre class="brush:js;">
/**

• 图片上传获取返回的url
  */
  app .factory('fileReader',["$q","$log",function($q,$log){
  var onLoad = function(reader,deferred,scope) {
  return function () {
  scope.$apply(function () {
  deferred.resolve(reader.result);
  });
  };
  };

   var onError = function (reader,s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e) {
     return function () {
       s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.$apply(function () {
         deferred.reject(reader.result);
       });
     };
   };
  
   var getReader = function(deferred,s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e) {
     var reader = new FileReader(); //fileReader
     reader.onload = onLoad(reader,s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e);
     reader.onerror = onError(reader,s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e);
     return reader;
   };
  
   var readAsDataURL = function (file,s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e) {
     var deferred = $q.defer();
     var reader = getReader(deferred,s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e);   
     reader.readAsDataURL(file);  
     return deferred.promise;
  
   };
  
   return {
     readAsDataUrl: readAsDataURL 

  };
  }])