溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-10-21 21:11:40 來(lái)源：腳本之家 閱讀：164 作者：gunelark 欄目：web開(kāi)發(fā)

•上傳圖片需要引入插件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ù)大家的！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手