快捷導(dǎo)航

Angularjs上傳圖片實例詳解

更新時間：2017年08月06日 08:46:22 作者：gunelark

上傳圖片需要引入插件ngFileUpload，使用bower安裝方法，下面通過本文給大家介紹Angularjs上傳圖片實例詳解，希望對大家有所幫助

•上傳圖片需要引入插件ngFileUpload，使用bower安裝方法： bower install ng-file-upload --save,安裝后需要在命名app的名字js文件中注入，如下所示：

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

•在相應(yīng)的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>

在相應(yīng)的controller中：

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

在http請求如下：

 //文件上傳預(yù)設(shè)配置
      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);
        //上傳文件到服務(wù)器
        Upload.upload({
          url: backend.url + ':' + backendDetail.port + '/' + backendDetail.service + '/' + interfaceName,
          data: param || {}
        }).then(function(data) {
          //service返回數(shù)據(jù)
          var result = data.data;
          //200代表接口調(diào)用成功
          if (data.status === 200) {
            //數(shù)據(jù)庫返回錯誤信息
            if (result && serviceErrors[result.returnCode]) {
              deferred.reject('Error Services');
              swal(result.message, '錯誤狀態(tài)碼：' + result.returnCode, 'error');
            } else if (!result.dataInfo) {
              deferred.reject('Error Image');
              swal('圖片上傳失敗', '請檢查圖片屬性', 'error');
            } else {
              deferred.resolve(result);
            }
          } else {
            deferred.reject('Error Services');
            swal('提交操作失敗', '錯誤狀態(tài)碼：' + data.status, 'error');
          }
        }, function(error) {
          deferred.reject('Error Services');
          swal('提交操作失敗', '錯誤狀態(tài)碼：' + error.status, 'error');
        });
        return deferred.promise;
      }

總結(jié)

以上所述是小編給大家介紹的Angularjs上傳圖片實例詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

您可能感興趣的文章: