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

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

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

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

/**
 * 图片上传获取返回的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, deferred, scope) {
          return function () {
            scope.$apply(function () {
              deferred.reject(reader.result);
            });
          };
        };

        var getReader = function(deferred, scope) {
          var reader = new FileReader(); //fileReader
          reader.onload = onLoad(reader, deferred, scope);
          reader.onerror = onError(reader, deferred, scope);
          return reader;
        };

        var readAsDataURL = function (file, scope) {
          var deferred = $q.defer();
          var reader = getReader(deferred, scope);   
          reader.readAsDataURL(file);  
          return deferred.promise;

        };

        return {
          readAsDataUrl: readAsDataURL 
      };
}])

我们现在有了图片的读取，我们再来搞定图片的on-change事件

/**
 * 图片上传预览
 */
app .directive(\'file\', [\'$parse\', \'fileReader\', function ($parse, fileReader) { 
      return {
        restrict: \'A\',
        link: function(scope, element, attrs, ngModel) {

          var model = $parse(attrs.file);
          var modelSetter = model.assign;
          console.log(modelSetter)
          element.bind(\'change\', function(event){
            scope.$apply(function(){
              modelSetter(scope, element[0].files[0]);
            });
            //附件预览         
               scope.imgupload = (event.srcElement || event.target).files[0];
               getFile(scope.imgupload, scope);

              //获得预览图地址并且把file对象放入上传合集内
               function getFile (imgupload, scope) {
                 if(!imgupload) {
                   return;
                 }
                 fileReader.readAsDataUrl(imgupload, scope)
                        .then(function(result) {
                         scope.imgshows.push(result)
                         var file = document.querySelector(\'input[type=file]\').files[0];
                         scope.uploadimgs.push(file)//这里是放着传给后台的数据file，下面controller的时候会有
                        });
               };
          });
        }
      };
    }]) 

这里就是提供上传图片预览的样式，还有预览图删除的功能

app .directive(\'uploadimg\', function () { 
      return {
        restrict: \'E\', 
        scope: {
          uploadimgs: \"=\"
        },
        templateUrl: \'./js/directives/uploadimg/uploadimg.html\',      
        link: function(scope, element, attrs) {
            scope.imgshows = []//预览图片合集放的是src    
            scope.uploadimg_del = function(index,imgs) {  
                scope.imgshows.splice(index,1);
                scope.uploadimgs.splice(index,1);
      }
     }
 }
}) 

<style type=\"text/css\">
.fileupload {
  width: 100px;
  height: 100px;
  border: 1px dotted #ccc;
  display: inline-block;
}
.fileupload-icon {
  font-size:32px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
</style>
<div>
  <div class=\"fileupload pos-rlt\" ng-repeat=\"imageSrc in imgshows\">
    <img ng-src=\"{{imageSrc}}\" style=\"max-width:200px;max-height:300px;margin:0 auto; display:block;\" class=\"pos-rlt\" width=100%; height=100%;/>
    <i class=\"icon ion-close-circled\" style=\"position: absolute; top:5px; right: 5px\" ng-click=\"uploadimg_del($index, imgshows)\"></i>
  </div>
  <div class=\"fileupload pos-rlt clear\" >
    <i class=\"icon ion-plus-round fileupload-icon\"></i>
    <input type=\"file\" style=\"display:inline-block; width: 100%; height: 100%; opacity:0\" name=\"upload_img\" file=\"upload_img\" placeholder=\"选择图片\" accept=\"image/png,image/gif,image/jpeg,image/jpg\"  >
  </div>
</div>
</label>

最后的调用也很简单
我们只需要在2个地方加代码一个是在界面，一个是在Controller里

<uploadimg uploadimgs=\"uploadimgs\"></uploadimg>

这个是在Controller里的，这是用来传给后台的数据集合，我们需要传给后台的是file对象

$scope.uploadimgs = []//上传图片合集放的是file对象

如何传给后台呢，直接附上代码，其实不难

$scope.save = function() {     
    var Fromdata = {
      \'name\': $scope.form.name,
      \'desc\': $scope.form.descr,
      \'price\': $scope.form.price,
      \'status\': $scope.form.status?1:0,

    }
    var uploadData = createFromData(Fromdata)
    for(var i = 0; i < $scope.uploadimgs.length; i++) {
      uploadData.append(\'upload_imgs\', $scope.uploadimgs[i])
    }

     $http({
     method:\'POST\',
     url:\"后台地址\",
     data: fd,
     headers: {\'Content-Type\':undefined},
     transformRequest: angular.identity
     })
     .success( function(response){
     //上传成功的操作

     });

   }  

//构造FormData
//@param 是一个对象
function createFromData(Fromdata) {
   var fd = new FormData();
   for(key in Fromdata) {
     fd.append(key,Fromdata[key]); 
   }
   return fd
}

最后给大家看下预览图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。