如何使用离子cordova angularjs将所选图像发送到弹簧控制器以保存到服务器?

时间:2016-11-23 18:35:42

标签: java angularjs ionic-framework ngcordova spring-restcontroller

如何使用离子cordova angularjs将所选图像发送到弹簧控制器以保存到服务器?

我在离子+角度+ cordova app中有这个代码。我想使用spring restful服务发送在服务器上选择的图像,以便将图像存储在服务器/数据库上,我可以检索它吗?

.controller('CameraCtrl', function ($scope, $cordovaCamera, $ionicLoading, $localstorage) {
$scope.data = { "ImageURI" :  "Select Image" };
$scope.takePicture = function() {
  var options = {
    quality: 50,
    destinationType: Camera.DestinationType.FILE_URL,
    sourceType: Camera.PictureSourceType.CAMERA
  };
  $cordovaCamera.getPicture(options).then(
    function(imageData) {
        $scope.picData = imageData;
        $scope.ftLoad = true;
        $localstorage.set('fotoUp', imageData);
        $ionicLoading.show({template: 'Foto acquisita...', duration:500});
    },
    function(err){
        $ionicLoading.show({template: 'Errore di caricamento...', duration:500});
        })
  }

  $scope.selectPicture = function() { 
    var options = {
        quality: 50,
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY
    };

  $cordovaCamera.getPicture(options).then(
    function(imageURI) {
        window.resolveLocalFileSystemURI(imageURI, function(fileEntry) {
            $scope.picData = fileEntry.nativeURL;
            $scope.ftLoad = true;
            var image = document.getElementById('myImage');
            image.src = fileEntry.nativeURL;
        });
        $ionicLoading.show({template: 'Foto acquisita...', duration:500});
    },
    function(err){
        $ionicLoading.show({template: 'Errore di caricamento...', duration:500});
    })
};

$scope.uploadPicture = function() {
    $ionicLoading.show({template: 'Sto inviando la foto...'});
    var fileURL = $scope.picData;
    var options = new FileUploadOptions();
    options.fileKey = "file";
    options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
    options.mimeType = "image/jpeg";
    options.chunkedMode = true;

    var params = {};
    params.value1 = "someparams";
    params.value2 = "otherparams";

    options.params = params;

    var ft = new FileTransfer();
    ft.upload(fileURL, encodeURI("http://www.yourdomain.com/upload.php"), viewUploadedPictures, function(error) {$ionicLoading.show({template: 'Errore di connessione...'});
    $ionicLoading.hide();}, options);
}

var viewUploadedPictures = function() {
    $ionicLoading.show({template: 'Sto cercando le tue foto...'});
    server = "http://www.yourdomain.com/upload.php";
    if (server) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState === 4){
                if (xmlhttp.status === 200) {                    
            document.getElementById('server_images').innerHTML = xmlhttp.responseText;
                }
                else { $ionicLoading.show({template: 'Errore durante il caricamento...', duration: 1000});
                return false;
                }
            }
        };
        xmlhttp.open("GET", server , true);
        xmlhttp.send()} ;
    $ionicLoading.hide();
}

$scope.viewPictures = function() {
    $ionicLoading.show({template: 'Sto cercando le tue foto...'});
    server = "http://www.yourdomain.com/upload.php";
    if (server) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState === 4){
                if (xmlhttp.status === 200) {                    
            document.getElementById('server_images').innerHTML = xmlhttp.responseText;
                }
                else { $ionicLoading.show({template: 'Errore durante il caricamento...', duration: 1000});
                return false;
                }
            }
        };
        xmlhttp.open("GET", server , true);
        xmlhttp.send()} ;
    $ionicLoading.hide();
}

})

而不是php URL,我需要提供spring rest post URL,这将转到spring java controller。如何编写控制器以检索图像信息,然后应用业务逻辑?

0 个答案:

没有答案