Angularjs 离子照片上传-文件到Base64字符串

我正在开发一个与rails API通信的Ionic应用程序。我有用户，用户有图片。我已经能够了解如何允许用户从他们的手机图像本机抓取图像

这允许用户从手机上抓取图像

$ionicPlatform.ready(function() {
 $scope.getImageSaveContact = function() {
 // Image picker will load images according to these settings
  var options = {
    maximumImagesCount: 1,
    width: 800,
    height: 800,
    quality: 80
  };

  $cordovaImagePicker.getPictures(options).then(function (results) {
    // Loop through acquired images
    for (var i = 0; i < results.length; i++) {
      $scope.collection.selectedImage = results[i];   // We loading only one image so we can use it like this

      window.plugins.Base64.encodeFile($scope.collection.selectedImage, function(base64){  // Encode URI to Base64 needed for contacts plugin
        $scope.collection.selectedImage = base64;
      });
    }
    console.log("results");
    console.log(results);
  }, function(error) {
    console.log('Error: ' + JSON.stringify(error));
  });
 };
});

$ionicPlatform.ready（函数（）{
$scope.getImageSaveContact=函数（）{
//图像选择器将根据这些设置加载图像
变量选项={
最大值：1，
宽度：800，
身高：800，
品质：80
};
$cordovaImagePicker.getPictures（选项）。然后（函数（结果）{
//通过采集的图像进行循环
对于（var i=0；i

问题是，它没有运行（或似乎没有运行）编码文件的

window.plugins.Base64.encodeFile

行。现在，它只是图像文件，而不是Base64编码的字符串

从设备摄像头抓取文件后，如何运行此功能

我能找到答案，下面是一个老项目的答案

---

添加此相机插件

cordova plugin add cordova-plugin-camera

默认情况下，这将返回以64为基数的图像

$scope.choosePhoto = function () {
            $scope.myPopup.close();
            var options = {
                quality: 75,
                destinationType: Camera.DestinationType.DATA_URL,
                sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
                allowEdit: true,
                encodingType: Camera.EncodingType.JPEG,
                targetWidth: 300,
                targetHeight: 300,
                popoverOptions: CameraPopoverOptions,
                saveToPhotoAlbum: false
            };
            $cordovaCamera.getPicture(options).then(function (imageData) {
                $scope.imgURI = "data:image/jpeg;base64," + imageData;

            }, function (err) {
                // An error occured. Show a message to the user
            });
        }

更多细节可在此处找到

---

希望这能帮上忙…

我把一堆东西拼在一起，特别是在导轨的一侧。我们的想法是点击一个按钮来获取一幅图像，从你的相机卷中选择一幅，将该图像转换成base64字符串，然后将该图像发送到服务器

我当前的堆栈是rails 4，ionic/angular v1。希望这能帮助其他人

角度控制器

function toDataUrl(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
      var reader = new FileReader();
      reader.onloadend = function() {
        callback(reader.result);
      }
      reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
  }

  $scope.grabImage = function () {
    var options = {
      maximumImagesCount: 1,
      width: 800,
      height: 800,
      quality: 80
    };

    $cordovaImagePicker.getPictures(options).then(function (results) {
      $scope.dataImg = results;

      return toDataUrl($scope.dataImg, function(base64Img) {
        $scope.base64 = base64Img;
        $state.go($state.current, {}, {reload: false});
      })
    }, function(error) {
      $scope.message = "Error: Failed to Attach Image";

      var alertPopup = $ionicPopup.alert({
        title: 'User Photos',
        templateUrl: 'templates/modals/success_or_error.html',
        scope: $scope
      });
    });
  }

  def create
    image = Paperclip.io_adapters.for(params[:image_file])
    image.class.class_eval { attr_accessor :original_filename, :content_type }
    image.original_filename = "mu_#{@current_mobile_user.id}_#{@current_mobile_user.pictures.count}.jpg"
    image.content_type = "image/jpeg"
    @picture = @current_mobile_user.pictures.create(image: image, imageable_id: @current_mobile_user.id)

    if @picture.save
      render json: ['Picture Uploaded!'], status: :created
    else
      render json: [@picture.errors.full_messages.to_sentence], status: :unprocessable_entity
    end
  end

轨道控制器

function toDataUrl(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
      var reader = new FileReader();
      reader.onloadend = function() {
        callback(reader.result);
      }
      reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
  }

  $scope.grabImage = function () {
    var options = {
      maximumImagesCount: 1,
      width: 800,
      height: 800,
      quality: 80
    };

    $cordovaImagePicker.getPictures(options).then(function (results) {
      $scope.dataImg = results;

      return toDataUrl($scope.dataImg, function(base64Img) {
        $scope.base64 = base64Img;
        $state.go($state.current, {}, {reload: false});
      })
    }, function(error) {
      $scope.message = "Error: Failed to Attach Image";

      var alertPopup = $ionicPopup.alert({
        title: 'User Photos',
        templateUrl: 'templates/modals/success_or_error.html',
        scope: $scope
      });
    });
  }

  def create
    image = Paperclip.io_adapters.for(params[:image_file])
    image.class.class_eval { attr_accessor :original_filename, :content_type }
    image.original_filename = "mu_#{@current_mobile_user.id}_#{@current_mobile_user.pictures.count}.jpg"
    image.content_type = "image/jpeg"
    @picture = @current_mobile_user.pictures.create(image: image, imageable_id: @current_mobile_user.id)

    if @picture.save
      render json: ['Picture Uploaded!'], status: :created
    else
      render json: [@picture.errors.full_messages.to_sentence], status: :unprocessable_entity
    end
  end

---

谢谢你的回答。我保留了几乎所有的代码，但将我的

$cordovaImagePicker.getPictures

替换为您的（在我的编辑中）。我添加了一系列警报（用于测试

爱奥尼亚视图

），并获得文件名的警报。但是，它不会进入第二个

then

块。你知道为什么会这样吗？你安装了cordova文件插件吗？是的，我安装了。