AngularJS图片上传功能的实现

2019-08-29 09:09栏目:WRB前端

AngularJS图片上传功用的兑现

一、前言

 

前一段时间做项目时,蒙受二个题材正是AngularJS实现图片预览和上传的机能,当时查看文书档案(都是罗马尼亚语文书档案)折腾了非常久才弄出来,现将全方位工艺流程整理出来,有亟待的相爱的人能够参见一下,倘令你有更好的秘籍,款待留言沟通~~话十分的少说平昔看落到实处。

 

二、具体落到实处

 

1、html标签结构

 

<input type="file" file-model="myFile"/>

<div class="col-md-12">

    <img ng-src="{{imageSrc}}" style="max-width:300px;max-height:300px;margin:0 auto;display:block;" />

</div>

input文件上传标签,div包裹的img标签为图片预览区域

 

2、定义directive

 

 

         angular.module('app')
            .directive('fileModel', ['$parse', function ($parse) {
                return {
                    restrict: 'A',
                    link: function(scope, element, attrs, ngModel) {
                        var model = $parse(attrs.fileModel);
                        var modelSetter = model.assign;
                        element.bind('change', function(event){
                            scope.$apply(function(){
                                modelSetter(scope, element[0].files[0]);
                            });
                            //附件预览
                                 scope.file = (event.srcElement || event.target).files[0];
                            scope.getFile();
                        });
                    }
                };
            }]);

 

 

input标签中的属性file-model即正是Angular中的指令,在地点代码的link方法中,大家为指令file-model所在的因素绑定了change事件,change方法中收获到要上传的文件对象,并调用了controller中的getFile()方法(详见controller)

 

3、定义调整器UploaderControler

 

复制代码

         angular.module('app')

            .controller('UploaderController', function($scope, fileReader){

                $scope.getFile = function () {

                    fileReader.readAsDataUrl($scope.file, $scope)

                                  .then(function(result) {

                                      $scope.imageSrc = result;

                                  });

                };

            })

复制代码

调整器中定义了四个UploaderController,该调控器在其功能域中定义了getFile()方法,getFile方法中调用了fileReader service中的readAsDataUrl方法,此措施中生成了图片的地方url,并将结果回到getFile中,将回到的url赋值给$scope.imageSrc ,依据Angular双向数据绑定的体制,img成分中ng-src属性值为url,那么就足以在页面上预览图片了。file里德r service是怎么定义的吧?

 

4、定义service fileReader

 

 

       angular.module('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();
                    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  
                };
            }])

 

fileReader service首若是到位生成获取到的公文的url地址,重临到view进行预览。

 

5、附属类小部件上传的落到实处

 

附属类小部件上传主就算将页面表单数据通过后台提供的接口写入到数据库中,具体落到实处在调控器UploaderControler中加进如下代码:

 

 // 组装表单数据
                var postData = {
                    vacationType: $scope.leave.type,
                    reason: $scope.leave.reason,
                    familyRelation:  $scope.leave.type == 7 ? $scope.leave.relation : "",
                    startTime: startTime,
                    endTime: endTime,
                    fileName: $scope.imageSrc,
                    workDelivers: workDelivers,
                    ccmailNickNames: sendPersons,
                    realDays:  $scope.leave.type == 8 ? $scope.leave.timeLong : ""
                };

                var promise = postMultipart('/maldives/leave/save', postData); 

                function postMultipart(url, data) {
                    var fd = new FormData();
                    angular.forEach(data, function(val, key) {
                        fd.append(key, val);
                    });
                    var args = {
                        method: 'POST',
                        url: url,
                        data: fd,
                        headers: {'Content-Type': undefined},
                        transformRequest: angular.identity
                    };
                    return $http(args);
                }

 

             

 

postData为表单中的数据(包涵上传的图形音信),'/maldives/leave/save'代表的是伸手后台的数量接口,$http是Angular内置的service,能向后台发送GET或POST央浼。

 

三、对Angular中service、controller、directive的认识和领悟

 

Service便是单例对象在AngluarJS 中的一个小名。这几个单例对象会被日常传来传去,保障你每一趟访问到的都以同一个实例。基于这种思维,单例对象让我们得以达成部分杰出酷的功效,它能够让非常多controller和directive访谈其里面包车型大巴数值。

 

controller把service、依赖关系、以及其余对象串联到一块儿,然后通过scope把它们关联到view上。假若在你的视图里面必要管理千头万绪的作业逻辑,那么把它们放到controller里面也是三个非凡精确的选料。

一、前言 前一段时间做项目时,遇到多个标题就是AngularJS完结图片预览和上传的功能,当时翻开文书档案(都以拉脱维亚语...

版权声明:本文由威尼斯人app发布于WRB前端,转载请注明出处:AngularJS图片上传功能的实现