无法通过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

回答

相关问题