快捷導(dǎo)航

Angularjs上傳圖片實(shí)例詳解

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

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

•上傳圖片需要引入插件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中：

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

在http請(qǐng)求如下：

 //文件上傳預(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返回?cái)?shù)據(jù)
          var result = data.data;
          //200代表接口調(diào)用成功
          if (data.status === 200) {
            //數(shù)據(jù)庫(kù)返回錯(cuò)誤信息
            if (result && serviceErrors[result.returnCode]) {
              deferred.reject('Error Services');
              swal(result.message, '錯(cuò)誤狀態(tài)碼：' + result.returnCode, 'error');
            } else if (!result.dataInfo) {
              deferred.reject('Error Image');
              swal('圖片上傳失敗', '請(qǐng)檢查圖片屬性', 'error');
            } else {
              deferred.resolve(result);
            }
          } else {
            deferred.reject('Error Services');
            swal('提交操作失敗', '錯(cuò)誤狀態(tài)碼：' + data.status, 'error');
          }
        }, function(error) {
          deferred.reject('Error Services');
          swal('提交操作失敗', '錯(cuò)誤狀態(tài)碼：' + error.status, 'error');
        });
        return deferred.promise;
      }

總結(jié)

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

您可能感興趣的文章: