怎么将图片上传封装成指令？-白红宇

怎么将图片上传封装成指令？

阅读量：6990 次

发布时间：2019-06-27

本文共 2706 字，大约阅读时间需要 9 分钟。

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【怎么将图片上传封装成指令？】

1.背景介绍

在js-task-9内，我们需要实现一个将本地图片上传的功能，并且能够进行预览并且将图片的一些属性展示出来。

为了实现这个功能，我们利用所学的angular知识来做一个功能比较简单的图片上传组件。

2.知识剖析

指令：

1.angular指令本质上就是AngularJs扩展具有自定义功能的html元素的途径。

2.内置指令，打包在AngularJs内部的指令，所有内部指令的命名空间都使用ng作为前缀，3.所以在写自定义指令的时候，避免用ng作为指令命名的前缀。

4.创建指令的方式有四种，在指令里用 restrict属性控制:E:元素A:属性(这个是比较推荐的方式)C:css类M:注释

5.向指令中传递数据，用template属性

组件功能：

1.点击按钮上传图片

2.图片能在本地预览

3.显示图片信息，显示上传进度

4.点击上传按钮上传到服务器

5.点击删除按钮，删除。

6.上传按钮只能按一次

3.常见问题

如何实现组件?

4.解决方案

5.编码实战

html模板：


    
             
     
                  
      
                       
       
        上传:                
        
         选择图片
         图片最大为2000000byte(约2MB)                
         
                                  
          
                                                               名字                    大小                    进度                    状态                    操作                                                
           
                            
            
                                 { {name}}                    { {size}}                    
             
              { {progress}}                    { {status}}                                            
              
                                           
               
                上传                            
                
                 删除                                                                                                    自定义指令：myApp.directive('imgUpload', function ($http) {    return {        restrict: 'AEC',        replace: true,        transclude: true,        templateUrl: "imgLoad.html",        link: function (scope, ele, attr) {            scope.imgFile = document.getElementById('imgFile');            scope.img = document.getElementById('img');            scope.progress='';            scope.imgFile.onchange = function () {                if(scope.imgFile.files[0].size>=2000000){                    alert('图片大小超限~')                }else{                    var reader = new FileReader();                    reader.readAsDataURL(scope.imgFile.files[0]);                    scope.$apply(function () {                        scope.hasImg = scope.imgFile.files[0];                        scope.name = scope.imgFile.files[0].name;                        scope.size = scope.imgFile.files[0].size > 1024 * 1024 ? (scope.imgFile.files[0].size / 1024 / 1024).toFixed(2) + 'MB' : (scope.imgFile.files[0].size / 1024).toFixed(2) + 'KB';                    })                }            };            scope.delete = function () {                scope.img.src = '';                scope.hasImg = false;                scope.upDisabled = false;            };            scope.upLoad = function () {                $http({                    method: 'post',                    url: '/carrots-admin-ajax/a/u/img/task',                    headers: {'content-type': undefined},                    uploadEventHandlers:{                        progress: function(e) {                            if (e.lengthComputable) {                                scope.progress = Math.round(e.loaded * 100 / e.total);                            }                        }                    },                    transformRequest: function () {                        var formData = new FormData();                        formData.append('file', scope.hasImg);                        return formData;                    }                }).then(function successCallback(res) {                    scope.status = res.data.message;                    scope.src = res.data.data.url;                    scope.upDisabled = true;                },function errorCallback(res) {                    scope.status = res.data.message;                    scope.upDisabled = true;                })            }        }    };});