二、angularjs上傳圖片

標籤：pat   命名   disabled   ons   服務   請求   color   屬性   png   

• 上傳圖片需要引入外掛程式ngFileUpload，使用bower安裝方法： bower install ng-file-upload --save,安裝後需要在命名app的名字js檔案中注入，如下所示：

(function() {    angular.module(‘app‘, [        ‘ionic‘,‘ngStorage‘,‘ngFileUpload‘    ]);})();

• 在相應的html中引入檔案路徑：<script src="lib/ng-file-upload/ng-file-upload.min.js"></script>
• 如何使用呢？在html檔案中使用 ngf-select

<div class="editHeader_div" ngf-select="setStore.uploadFiles($file, $invalidFiles)">                <img class="editStoreImg" ng-src="img/{{setStore.img}}">                <p>更改頭像</p>  </div>

在相應的controller中：

 //上傳單個檔案        function uploadFiles(file, errFiles) {            vm.imgInfo = file;            console.log(file);            if (file) {                vm.img = file.name;//測試使用                //Service.upload(‘‘,‘‘,{file:file})//開發使用            }        }

在http請求如下：

 //檔案上傳預設配置            Upload.setDefaults({                ngfAccept: "‘.jpg,.png,.gif,.jpeg‘",                ngfDropDisabled: ‘true‘,                ngfPattern: ‘.jpg,.png,.gif,.jpeg‘,                ngfMaxSize: ‘2MB‘            }); //上傳檔案            function upload(ctrl, name, param) {                var deferred = $q.defer(),                    interfaceName = ctrl + ‘/‘ + name,                    backendDetail = getBackendDetail(interfaceName);                //上傳檔案到伺服器                Upload.upload({                    url: backend.url + ‘:‘ + backendDetail.port + ‘/‘ + backendDetail.service + ‘/‘ + interfaceName,                    data: param || {}                }).then(function(data) {                    //service返回資料                    var result = data.data;                    //200代表介面調用成功                    if (data.status === 200) {                        //資料庫返回錯誤資訊                        if (result && serviceErrors[result.returnCode]) {                            deferred.reject(‘Error Services‘);                            swal(result.message, ‘錯誤狀態代碼：‘ + result.returnCode, ‘error‘);                        } else if (!result.dataInfo) {                            deferred.reject(‘Error Image‘);                            swal(‘圖片上傳失敗‘, ‘請檢查圖片屬性‘, ‘error‘);                        } else {                            deferred.resolve(result);                        }                    } else {                        deferred.reject(‘Error Services‘);                        swal(‘提交操作失敗‘, ‘錯誤狀態代碼：‘ + data.status, ‘error‘);                    }                }, function(error) {                    deferred.reject(‘Error Services‘);                    swal(‘提交操作失敗‘, ‘錯誤狀態代碼：‘ + error.status, ‘error‘);                });                return deferred.promise;            }

 

二、angularjs上傳圖片