angular图片上传

html代码：

当input出发change事件会调用touchUpdateImg方法，传入file对象和需要展示得到imgsmall属性，通过FileReader对象读取文件对象，我使用了$apply进行了监听，之前不使用$apply时，没有实时展示图片。

<div class="imglist">
            <div class="imglist-title">
                商品相册
            </div>
            <div class="imglist-content">
                <div class="imglist-item">
                    <input class="oneimg" type="file" name="oneimg" onchange="angular.element(this).scope().touchUpdateImg(this.files,'imgSmall1')" ng-model="imgSmall1">
                    <img class="handle-inp" id="imgSmall1" ng-src="{{imgSmall1}}" />
                    <div class="mast-delete" ng-if="deleteImg[0]">
                      <div class="delete-img" ng-click="touchDeleteImg(0,'imgSmall1')">x</div>
                    </div>
                </div>
                <div class="imglist-item">
                    <input class="oneimg" type="file" name="oneimg" onchange="angular.element(this).scope().touchUpdateImg(this.files,'imgSmall2')" ng-model="imgSmall2">
                    <img class="handle-inp" id="imgSmall2" ng-src="{{imgSmall2}}" />
                    <div class="mast-delete" ng-if="deleteImg[1]">
                      <div class="delete-img" ng-click="touchDeleteImg(1,'imgSmall2')">x</div>
                    </div>
                </div>
                <div class="imglist-item">
                    <input class="oneimg" type="file" name="oneimg" onchange="angular.element(this).scope().touchUpdateImg(this.files,'imgSmall3')" ng-model="imgSmall3">
                    <img class="handle-inp" id="imgSmall3" ng-src="{{imgSmall3}}" />
                    <div class="mast-delete" ng-if="deleteImg[2]">
                      <div class="delete-img" ng-click="touchDeleteImg(2,'imgSmall3')">x</div>
                    </div>
                </div>
                <div class="imglist-item">
                    <input class="oneimg" type="file" name="oneimg" onchange="angular.element(this).scope().touchUpdateImg(this.files,'imgSmall4')" ng-model="imgSmall4">
                    <img class="handle-inp" id="imgSmall4" ng-src="{{imgSmall4}}" />
                    <div class="mast-delete" ng-if="deleteImg[3]">
                      <div class="delete-img" ng-click="touchDeleteImg(3,'imgSmall4')">x</div>
                    </div>
                </div>
            </div>
        </div>

js代码

model的代码，我在model了做了初始化的操作，就是没选则时默认图片

service.goodsObj['imgArr'] = {
                'imgBig':'image/supplier/add_big2.png',
                'imgSmall1':'image/supplier/add_small2.png',
                'imgSmall2':'image/supplier/add_small2.png',
                'imgSmall3':'image/supplier/add_small2.png',
                'imgSmall4':'image/supplier/add_small2.png'
            };

controller里是获取model里定义的数组，进行一开始的赋值

$scope.imgObj          = AddGoodsModel.goodsObj['imgArr'];
        $scope.file            = AddGoodsModel.goodsObj['file'];
        $scope.imgBig     		= $scope.imgObj['imgBig'];
        $scope.imgSmall1    	= $scope.imgObj['imgSmall1'];
        $scope.imgSmall2    	= $scope.imgObj['imgSmall2'];
        $scope.imgSmall3    	= $scope.imgObj['imgSmall3'];
        $scope.imgSmall4    	= $scope.imgObj['imgSmall4'];

// 上传图片
        function _touchUpdateImg(obj,imgobj){
            var file = obj[0];
            console.dir(file);
            // 判断文件的类型
            var name = file['name'];
            var postfix = name.substring(name.lastIndexOf(".")+1).toLowerCase();
            if(postfix !="jpg" &&  postfix !="png" && postfix != "jpeg" && postfix != "gif"){
                $scope.toast('上传的文件的类型只能是jpg、png、jpeg、gif');
                return false;
            }
            // 判断是不是大图
            if(imgobj == 'imgBig'){
                AddGoodsModel.emptyFile = false;
                $scope.emptyFile = false;
            }
            // 获取文件读取对象
            var reader = new FileReader();
            reader.readAsDataURL(file);

            reader.onload = function (e) {   
                $scope.$apply(function () {
                    // 判断文件的大小
                    if(file['size'] > 1048576){
                        dealImage(e.target.result,angular.element('#'+imgobj)[0],function(base64){
                            $scope[imgobj] = base64;
                            $scope.imgObj[imgobj] = encodeURI($scope[imgobj]);
                            $scope.file[imgobj]['size'] = file['size'];
                            $scope.file[imgobj]['type'] = file['type'];
                        });
                        $scope.toast('文件太大，请稍等！');
                        return false;
                    }  
                    $scope[imgobj] = e.target.result;
                    $scope.imgObj[imgobj] = encodeURI($scope[imgobj]);
                    $scope.file[imgobj]['size'] = file['size'];
                    $scope.file[imgobj]['type'] = file['type'];
                })

            }            
        }
        // 使用canvas对图片进行绘制
        function dealImage(path, obj, callback){
             var img = new Image();
             img.src = path;
             img.onload = function(){
              var that = this;
              // 默认按比例压缩
              var w = that.width,
               h = that.height,
               scale = w / h;
               w = obj.width || w;
               h = obj.height || (w / scale);
              var quality = 0.8;  // 默认图片质量为0.7
              //生成canvas
              var canvas = document.createElement('canvas');
              var ctx = canvas.getContext('2d');
              // 创建属性节点
              var anw = document.createAttribute("width");
              anw.nodeValue = w*1.5;
              var anh = document.createAttribute("height");
              anh.nodeValue = h*1.5;
              canvas.setAttributeNode(anw);
              canvas.setAttributeNode(anh); 
              ctx.drawImage(that, 0, 0, w*1.5, h*1.5);
              // 图像质量
              if(obj.quality && obj.quality <= 1 && obj.quality > 0){
               quality = obj.quality;
              }
              // quality值越小，所绘制出的图像越模糊
              var base64 = canvas.toDataURL('image/jpeg', quality );
              // 回调函数返回base64的值
              callback(base64);
             }
        }