使用ionic + cloudinary

Question

我想在后端存储中上传设备中的图片。我认为使用cloudinary更具吸引力。但是，我不知道我如何使用这个框架与离子。 你能不能给我一个简单的例子？

我在我的Utils.js上添加了服务：

(function () {
    function ius($q, $ionicLoading, $cordovaFile, $translate ) {  //CLOUDINARY_CONFIGS
        var service = {};
        service.uploadImage = uploadImage;
        return service;
        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': CLOUDINARY_CONFIGS.UPLOAD_PRESET }  //CLOUDINARY_CONFIGS.UPLOAD_PRESET
                };
                $cordovaFile
                  // Your Cloudinary URL will go here
                  .uploadFile(CLOUDINARY_CONFIGS.API_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;
        }
    }
    angular.module('App').factory('ImageUploadService', ius);
})();

在我的控制器上

'Use Strict';
angular.module('App').controller('editeventController', function ($scope,ImageUploadService) {


    $scope.upload = function () {
      
        ImageUploadService.uploadImage("img/test.jpg").then(  
        function (result) {

            var url = result.secure_url || '';
            var urlSmall;

            if (result && result.eager[0]) urlSmall = result.eager[0].secure_url || '';

            // Do something with the results here.

            $cordovaCamera.cleanup();

        },
        function (err) {

            // Do something with the error here
            $cordovaCamera.cleanup();

        });
      
    }

但我有这个错误：

  

rror：[$ injector：unpr]未知提供商：$ translateProvider＆lt; - $ translate＆lt; - ImageUploadService   http://errors.angularjs.org/1.3.13/ $注射器/ unpr？P0 =％24translateProvider％20％3 C-％20％24translate％20％3 C-％20ImageUploadService       at ionic.bundle.js：8762       at ionic.bundle.js：12696       at Object.getService [as get]（ionic.bundle.js：12843）       at ionic.bundle.js：12701       at getService（ionic.bundle.js：12843）       at Object.invoke（ionic.bundle.js：12875）       at Object.enforcedReturnValue [as $ get]（ionic.bundle.js：12737）       at Object.invoke（ionic.bundle.js：12884）       at ionic.bundle.js：12702       at getService（ionic.bundle.js：12843）

我不知道该怎么做。

Answer 1

发现了我自己摆弄的简单解决方案。非常简单的解决方案直接在控制器中，您可以根据需要轻松适应服务。只需添加cordova文件传输插件即可：

var server = 'https://api.cloudinary.com/v1_1/<cloudinary-name>/image/upload';

  //must be included for cloudinary unsigned upload
  var options = {
    'params': {
      'upload_preset': '<preset-name>'
    }
  };

  $cordovaFileTransfer.upload(server, $scope.imgURI, options)
  .then(function(result) {

    var response = JSON.parse(result.response);

    //this is your image source https url
    $scope.image_src = JSON.stringify(response.secure_url);

  }, function(err) {
    console.log(JSON.stringify(err));
    // Error print
  }, function (progress) {
    //progress update
  });

完成。

Answer 2

function imageUpload（）{     document.addEventListener（＆＃34; deviceready＆＃34;，function（）{

  var options = {
    quality: 50,
    destinationType: Camera.DestinationType.FILE_URI,
    sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
  };

  $cordovaCamera.getPicture(options).then(function(imageURI) {
    var Profile =imageURI;
    var server = 'https://api.cloudinary.com/v1_1/<cloudinary-name>/image/upload';

    //must be included for cloudinary unsigned upload
    var options = {
      'params': {
        'upload_preset': '<preset-name>'
      }
    };

    $cordovaFileTransfer.upload(server,Profile, options)
      .then(function(result) {

        var response = JSON.parse(result.response);

        //this is your image source https url
        vm.Profile =response.secure_url;

      }, function(err) {
        console.log(JSON.stringify(err));
        // Error print
      }, function (progress) {
        //progress update
      });
  }, function(err) {
    // error
  });

}, false);

}