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//生成canvasvar 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);}}