Question

我正在尝试使用cordova插件拍照并使用离子浏览器上传到cloudinary。我在cloudinary中设置了unsigned upload，基本上从https://calendee.com/2015/01/15/posting-images-to-cloudinary-in-ionic-apps/获取逻辑上传到cloudinary。我在DashCtrl控制器中编写逻辑只是为了方便查看所有内容。代码如下：

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope, $cordovaCamera, $cordovaGeolocation, $cordovaFileTransfer, $q, $base64, $translate) {
  //$scope.$inject = ['$cordovaCamera','$cordovaGeolocation','$cordovaFileTransfer'];
  $scope.imageURI = '';
  $scope.log=function(){
    console.log('hello~~~');
  };


  $scope.takePicture = function() {
    console.log('taking pictures ....');
        var options = {
            quality : 75,
            destinationType : Camera.DestinationType.DATA_URL,
            sourceType : Camera.PictureSourceType.CAMERA,
            allowEdit : true,
            encodingType: Camera.EncodingType.JPEG,
            targetWidth: 300,
            targetHeight: 300,
            popoverOptions: CameraPopoverOptions,
            saveToPhotoAlbum: false
        };

        $cordovaCamera.getPicture(options).then(function(imageData) {
            $scope.imageURI =  imageData;

            //console.log('$scope.image is ', $scope.imageURI);
            var base64EncodedString = $base64.encode(imgURI);
            var base64EncodedString = decodeURIComponent(base64EncodedString);
            var decodedString = $base64.decode(base64EncodedString);
            return uploadImage(decodedString);
        })
        .then(function(result){
          var url = result.secure_url || '';
          var urlSmall;

          if(result && result.eager[0]) {
            urlSmall = result.eager[0].secure_url || '';
            console.log('url ~~~~~~~~ is ', urlSmall);
            chat.sendMessage(roomId,'', 'default', urlSmall, function(result){
              console.log('url is ', urlSmall);
              console.log('message image url successfully updated to firebase');
            })
          }

          // Do something with the results here.

          $cordovaCamera.cleanup();
        }, function(err){
          // Do something with the error here
          $cordovaCamera.cleanup();
        });

  };

  function uploadImage(imageURI) {
        var deferred = $q.defer();
        var fileSize;
        var percentage;
        // Find out how big the original file is
        window.resolveLocalFileSystemURL(imageURI, function(fileEntry) {
          fileEntry.file(function(fileObj) {
            fileSize = fileObj.size;
            // Display a loading indicator reporting the start of the upload
            $ionicLoading.show({template : 'Uploading Picture : ' + 0 + '%'});
            // Trigger the upload
            uploadFile();
          });
        });
        function uploadFile() {
          // Add the Cloudinary "upload preset" name to the headers
          var uploadOptions = {
            params : { 'upload_preset': MY_PRESET}
          };
          $cordovaFile
            // Your Cloudinary URL will go here
            .uploadFile(MY_UPLOAD_URL, imageURI, uploadOptions)

            .then(function(result) {
              // Let the user know the upload is completed
              $ionicLoading.show({template : 'Upload Completed', duration: 1000});
              // Result has a "response" property that is escaped
              // FYI: The result will also have URLs for any new images generated with 
              // eager transformations
              var response = JSON.parse(decodeURIComponent(result.response));
              deferred.resolve(response);
            }, function(err) {
              // Uh oh!
              $ionicLoading.show({template : 'Upload Failed', duration: 3000});
              deferred.reject(err);
            }, function (progress) {
              // The upload plugin gives you information about how much data has been transferred 
              // on some interval.  Use this with the original file size to show a progress indicator.
              percentage = Math.floor(progress.loaded / fileSize * 100);
              $ionicLoading.show({template : 'Uploading Picture : ' + percentage + '%'});
            });
        }
        return deferred.promise;
  }


})

我能拍照，但就是这样。 uploadImage中的console.log从未出现过。为我的新手离子知识道歉，但我真的不知道在哪里解决这个问题。我配置发布到此cloudniary网址：“http://res.cloudinary.com/MY_DOMAIN/image/upload”。

此代码中包含完整代码：https://github.com/7seven7lst/Ionic_test/

Answer 1

您正在使用

$cordovaFile.uploadFile(MY_UPLOAD_URL, imageURI, uploadOptions)

你需要使用

 $cordovaFileTransfer.upload(server, filePath, options)

更多信息：

CordovaFileTransfer

离子拍照无法使用未签名上传上传到cloudinary

1 个答案: