Angularjs 实现多图片上传预览

我会带着你远行 2022-06-08 09:56 410阅读 0赞

最近要实现一个多图片上传的预览功能，网上有很多例子大多不太完整，我就把他们的整合了下并且加了一些功能和界面，我们只需要调用一条指令就可以实现，但传给后台还需要额外的代码，会在后面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);
                            }
                        }
                    }
            })

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

这个是在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
    }

最后给大家看下预览图  
![这是一开始没有上传时的样子][SouthEast]  
![上传图片后的样子][SouthEast 1]

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

[SouthEast]: /images/20220608/a0a7293d05534ac68df66ad8cef0c659.png
[SouthEast 1]: /images/20220608/ee9dd64a4ea5417b89c6a8272ebf0934.png