2016-05-24 3 views
0

私はIonic Frameworkで作成されたアプリを持っています。このアプリのバックエンドには、コンテンツエディタ、 (Carrierwaveを使用して)。Ionic(Cordova)AppのRails(バックエンド)でアップロードされたアセットを扱う

簡潔な情報をIonicアプリに返すAPIを作成しました。プライベートネットワーク内のRails管理パネルを隔離します。 私はコンテンツを完全に投稿し、別のオブジェクトからリレーションを取得し、JSON経由でIonicアプリに送信します。

しかし、Ionicアプリで画像を表示するためにアップロードされた(Carrierwaveを介して)アセットをどのように適切に処理することはできません。

おかげで、

答えて

0
then first you have to add 3 plugins which are below 
  1. コルドバのプラグインはorg.apache.cordova.file転送

  2. コルドバのプラグインを追加し

  3. コルドバプラグインをorg.apache.cordova.file追加org.apache.cordova.cameraを追加してください

そして

のonClickイベントを ギャラリーから画像を選択し、サーバー上

$scope.editProfileImgGallary = function() { 
    navigator.camera.getPicture(uploadEditProfilePhotosImage, onFailEditProfilePhoto, { 
     targetWidth: 512, 
     targetHeight: 512, 
     quality: 40, 
     correctOrientation: true, 
     allowEdit: true, 
     destinationType: navigator.camera.DestinationType.FILE_URI, 
     sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY 
    }); 
    } 

    function onFailEditProfilePhoto(message) { 
    // alert('Failed because: ' + message); 
    } 

    function uploadEditProfilePhotosImage(imageURI) { 
    // $ionicLoading.show({ 
    // template: '<p>Loading...</p><ion-spinner icon="bubbles"></ion-spinner>' 
    // }); 
    console.log(imageURI); 
    // var img = document.getElementById('userEditProfileImg'); 
    // img.src = imageURI; 
    var options = new FileUploadOptions(); 
    options.fileKey = "file"; 
    options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1); 
    options.mimeType = "image/jpeg"; 
    var ft = new FileTransfer(); 
    ft.upload(imageURI, encodeURI('uploadimg.php'), winEditProfilePhotos, failEditProfilePhotos, options); 
    } 

    function winEditProfilePhotos(r) { 
    console.log("Code = " + r.responseCode); 
    console.log("Response = " + r.response); 
    console.log("Sent = " + r.bytesSent); 
    // $ionicLoading.hide(); 
    } 

    function failEditProfilePhotos(error) { 
    console.log("upload error source " + error.source); 
    console.log("upload error target " + error.target); 
    // $ionicLoading.hide(); 
    // var alertPopup = $ionicPopup.alert({ 
    // title: 'Uh Oh!', 
    // template: 'You Get Some Error Please Try Again..' 
    // }); 
    } 

をアップロードし、HTMLページに怒鳴るコードや害虫をコピーするために、あなたのコントローラにコードや害虫の下にコピー

<div ng-click="editProfileImgGallary();" ></div> 
関連する問題