1.html
<div class="col col-50" style="text-align: center"> <img src="{{imageUrl}}{{fileUrl}}" width="60" height="60" style="border-radius: 30px" > <div id="myupload"> <input id="uploadfile" file-model="myFile" type="file" name="file" accept="image/*" style="opacity: 0;position: absolute;font-size: 100px;right: 60%;top: 44px;width: 50%;height: 100px"> </div> <p style="margin-top: 5px">ATM会员</p> </div> 2.directive.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(scope.file); $('#uploadfile').val(''); //发现拍照上传后再次拍照不会调用change方法，加入这行代码可解决 }); } }; }])
3.controller $scope.getFile = function (file) { $ionicLoading.show({ template: '<ion-spinner icon="ios-small"></ion-spinner>'+'图片上传中，请稍候...', duration: 3000 }); Upload.upload({ url: ApiUrl.url+'/User_login/image', data: {file: file} }).then(function (resp) { $scope.fileUrl = resp.data; toastr.success( "上传成功"); localStorage.setItem("avatar",$scope.fileUrl); console.log($scope.imageUrl+$scope.fileUrl) $ionicLoading.hide(); // console.log('Success ' + resp.data.file_name + 'uploaded. Response: ' + resp.data); }, function (resp) { $ionicLoading.hide(); toastr.warning( resp.data.tips,"上传失败"); }, function (evt) { var progressPercentage = parseInt(100.0 * evt.loaded / evt.total); console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name); }); }; 上传用的ng-file-upload插件 地址：https://github.com/danialfarid/ng-file-upload 点击打开链接
