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
}

最後給大家看下預覽圖

大家發現什麼問題一起討論~~~~