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

Question

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

我制作了一个将简洁信息返回给 Ionic 应用程序的 API。并将 Rails 管理面板隔离在专用网络中。我从另一个对象获得完整的帖子内容，关系，并通过JSON发送到Ionic应用程序。

但是我不知道如何正确处理上传的（通过Carrierwave）资产以在我的Ionic应用程序中显示图像。

谢谢

Answer 1

then first you have to add 3 plugins which are below

1. Cordova plugin add org.apache.cordova.file-transfer

2. cordova plugin add org.apache.cordova.file

3. Cordova插件添加org.apache.cordova.camera

并将下面的代码和害虫复制到您的控制器中以从中选择图像 图库并在服务器上上传

$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>