离子拍照无法使用未签名上传上传到cloudinary [英] Ionic Take pictures cannot upload to cloudinary using unsigned upload

问题描述

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

I am trying to take picture using cordova plugin and upload to cloudinary using ionic browser. I setup the unsigned upload in cloudinary, and basically took the logic from https://calendee.com/2015/01/15/posting-images-to-cloudinary-in-ionic-apps/ to upload to cloudinary. I have written logic all in DashCtrl controller just for easiness to see everything. the code is as follow:

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 。

I am able to take a picture, but that's it. the console.log in uploadImage never appeared. Apologize for my novice ionic knowledge, but i really don't know where to trouble-shoot this. I configured to post to this cloudniary url: "http://res.cloudinary.com/MY_DOMAIN/image/upload".

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

Full code is in this repo: https://github.com/7seven7lst/Ionic_test/

推荐答案

您正在使用

$cordovaFile.uploadFile(MY_UPLOAD_URL, imageURI, uploadOptions)

您需要使用

 $cordovaFileTransfer.upload(server, filePath, options)

更多信息：

< a href =http://ngcordova.com/docs/plugins/fileTransfer/ =nofollow noreferrer> CordovaFileTransfer

这篇关于离子拍照无法使用未签名上传上传到cloudinary的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！