無法通過angularjs上傳圖像到cloudinary

一直在這個問題上掙扎了一個星期。我正嘗試將圖片上傳到cloudinary，以下是cloudinary提供的photo_album樣本https://github.com/cloudinary/cloudinary_angular/tree/master/samples/photo_album。這是我上傳的代碼：無法通過angularjs上傳圖像到cloudinary

var d = new Date(); 

    $scope.title = 'Image('+d.getTime() + '-' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() +')'; 

    $scope.uploadFiles = function (file) { 
    $scope.file = file; 
    console.log(file); 
    if(!$scope.file) return; 
     if(file && !file.$error) { 
     file.upload = $upload.upload({ 
      url : 'https://api.cloudinary.com/v1_1/' + $.cloudinary.config().cloud_name + "/upload", 
      fields: { 
      upload_preset: $.cloudinary.config().upload_preset, 
      tags   : 'merchantAlbum', 
      context  : 'photo=' + $scope.title 
      }, 
      file : file 

     }); 

     file.upload.then(function (response) { 
      console.log('uploading...'); 
      $timeout(function() { 
      console.log(response); 
      file.result = response.data; 
      }, function (response) { 
      if(response.status > 0) { 
      // $scope.errorMsg = response.status + ':' + response.data; 
       console.log('error occurred'); 
      } 
      }) 
     }).catch(function (error) { 
      console.log('error ', error); 
     }); 

     file.upload.progress(function (e) { 
      file.progress = Math.round((e.loaded * 100.0)/e.total); 
      file.status = 'Uploading...' + file.progress + '%'; 
     }).success(function (data, status, headers, config) { 
      $rootScope.merchantImage = $rootScope.merchantImage || []; 
      data.context    = { 
      custom: { 
       merchantImage: $scope.title 
      } 
      }; 
      file.result    = data; 
      $rootScope.merchantImage.push(data); 
     }).error(function (data, status, headers, config) { 
      file.result = data; 

     }) 
     } else { 
     console.log('error occurred'); 
     } 
    }

我嘗試添加一些記錄，看看事情會出錯，我一直在瀏覽器中獲取是例外：

的XMLHttpRequest無法加載https://api.cloudinary.com/v1_1/xxxx/upload。預檢響應中的Access-Control-Allow-Headers不允許請求標頭字段__setXHR_。

我的依賴關係是：在預期

<scriptsrc="bower_components/cloudinary_js/js/jquery.cloudinary.js"> </script> 
<script src="bower_components/ng-file-upload/ng-file-upload- shim.min.js"></script> 
<script src="bower_components/angular/angular.js"></script> 
<script src="bower_components/angular-animate/angular-animate.min.js"> 
</script> <script src="bower_components/angular-resource/angular-resource.js"></script> 
<script src="bower_components/cloudinary_ng/js/angular.cloudinary.js"></script>

謝謝！

來源

2015-11-02 user3743123

我設法解決這個問題！事實證明，還需要這些插件：

<script src="bower_components/blueimp-file-upload/js/vendor/jquery.ui.widget.js"></script> 
<script src="bower_components/blueimp-file-upload/js/jquery.iframe-transport.js"></script> 
<script src="bower_components/blueimp-file-upload/js/jquery.fileupload.js"></script>

對於任何人誰可能會遇到同樣的問題，請將這三個插件在你依賴的頂部。

來源

2015-11-03 20:49:14 user3743123

無法通過angularjs上傳圖像到cloudinary

回答

相關問題