通过 angularjs 将图像上传到 cloudinary 时遇到问题答案

【问题标题】：Having trouble uploading images to cloudinary via angularjs通过 angularjs 将图像上传到 cloudinary 时遇到问题
【发布时间】：2016-02-02 23:03:02
【问题描述】：

已经为这个问题苦苦挣扎了一周。我正在尝试按照 cloudinary 在此处 https://github.com/cloudinary/cloudinary_angular/tree/master/samples/photo_album 提供的 photo_album 示例将图像上传到 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>

感谢期待！

【问题讨论】：

标签： javascript jquery angularjs amazon-s3 cloudinary

【解决方案1】：

我设法解决了这个问题！事实证明这些插件也是必需的：

<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>

对于可能遇到相同问题的任何人，请将这三个插件放在依赖项的顶部。

【讨论】：