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}

最后给大家看下预览图

大家发现什么问题一起讨论~~~~