Question

我正在使用cordova-plugin-camera。我需要在哪里捕捉图像并发布到服务器以及一些属性值。我得到了图像和Image_URI所以我可以获取图像，现在我面临问题将其发送到服务器。我怎样才能使用$ http发送。

HTML

       <div class="buttons row">                    
              <button class="button button-block button-small button-royal" ng-click="takePhoto()">
                Take Photo
             </button> &nbsp;
             <button class="button button-block  button-small  button-balanced" ng-click="choosePhoto()">
                Choose Photo
             </button>
             &nbsp;
       </div>
       <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}">

CONTROLLER

.controller('PicCtrl', function($scope,$cordovaCamera, $http){

    $scope.takePhoto = function () {
        var options = {
           quality: 75,
           destinationType: Camera.DestinationType.DATA_URL,
           sourceType: Camera.PictureSourceType.CAMERA,
           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
        });
    }

    $scope.choosePhoto = function () {
       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
       });
    }  

    var Send = { 
         method: 'POST',
         url : baseURL+"/send_pic",
         headers: {'Content-Type': false},
         data: {                
             ID     : $scope.ID,
             IMAGE  : $scope.imgURI
         },
         timeout:30000
    };
    $http(Send)
         .success(function(data) { //success  })
         .error(function() { //error }); 



})

Answer 1

传递imageData而不是网址。

var dataSend = new FormData();
dataSend.append('ImageData', $scope.imageData);
dataSend.append('ID', $scope.ID);

var Send = { 
             method: 'POST',
             url : baseURL+"/send_pic",
             headers: {'Content-Type': undefined},
             data: dataSend,
             timeout:30000
        };
$http(Send)
     .success(function(data) { 
           //success  
     })
     .error(function() { 
           //error 
     });

更新：

$cordovaCamera.getPicture(options).then(function (imageData) {
  $scope.imageDate = imageDate;
  $scope.imgURI = "data:image/jpeg;base64," + imageData;
  }, function (err) {
  // An error occured. Show a message to the user
});

Answer 2

我认为最好的方法是：

var formDataMultipart = new FormData();
var file = $element.find('#file')[0].files[0]; //or $('#file').files[0]
formDataMultipart.append('userFile', file);
formDataMultipart.append('token', cookie); //If needed

$http.post('/api/upload', formDataMultipart, {
                withCredentials: false,
                headers: {
                    'Content-Type': undefined
                },
                transformRequest: angular.identity,
                params: {
                formDataMultipart
            },
            responseType: 'json'
        })
            .then(.....)

在服务器端，您可以通过“用户文件”来抓取文件。以及所有注入的值，而不是类似的标记＆＃39;或任何其他参数

如何使用Ionic Framework将图像文件以$ http格式发送到服务器

2 个答案: