在 Ionic (Cordova) 应用程序中处理 Rails（后端）中的上传资产

Question

我有一个用 Ionic Framework 构建的应用程序，这个应用程序的后端有一个 Rails 应用程序管理员面板，带有内容编辑器、用户控制、图像上传（使用 Carrierwave）。

我制作了一个API returns Ionic 应用程序的简明信息。并在专用网络中隔离 Rails 管理面板。我从其他对象获取完整的帖子内容、关系，并通过 JSON.

发送到 Ionic 应用程序

但我没有正确处理（通过 Carrierwave）上传的资产以在我的 Ionic 应用程序中显示图像。

谢谢，

Answer 1

then first you have to add 3 plugins which are below

cordova插件添加org.apache.cordova.file-传输
cordova插件添加org.apache.cordova.file
cordova插件添加org.apache.cordova.camera

And copy below code and pest into your controller to pick image from gallery and upload on server

$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..'
    // });
  }

And copy bellow code and pest into your HTML page onClick Event

<div ng-click="editProfileImgGallary();" ></div>

在 Ionic (Cordova) 应用程序中处理 Rails（后端）中的上传资产

Dealing with uploaded assets in Rails (backend) in a Ionic (Cordova) App

assets

ruby-on-rails

cordova

ionic-framework