Question

我正在尝试从离子应用程序向mysql数据库发送注册详细信息。我确信我的Web服务运行良好但是当我发送base64图像代码时，它给出了 XMLHttpRequest无法加载http://nightfoxtechnologies.in/locationbasedreminder/index.php。请求标题字段在预检响应中，Access-Control-Allow-Headers不允许使用Content-Type。错误。

我已经使用邮递员检查了这个但是同样的问题但是当我发送base64图像代码时没有将base64数据成功插入数据库问题。

我检查了我的base64代码是否正确。

标签-signup.html

<div class="tabs-striped  tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item " href="#/app/login"><i class="icon ion-unlocked"></i> Login </a>
      <a class="tab-item active" href="#/app/signup"> <i class="icon ion-person"></i> Sing Up </a>
    </div>
  </div>

<ion-view view-title="Sign Up" class="loginBg" hide-nav-bar="true" >
  <ion-content class="padding">

  <div class="row responsive-sm padding remvoeBP">
      <div class="col">
           <div class="app-logo"><img src="img/logo.png"></div>

            <div class="list list-inset removePM">
              <label class="item item-input"><input type="text" ng-model="user.username" placeholder="User Name"> </label>
              <label class="item item-input"><input type="text" ng-model="user.password" placeholder="Password"> </label>
                  <script>
                function readImage() {
                    if (this.files && this.files[0]) {
                        var FR = new FileReader();
                        FR.onload = function (e) {
                            $('#myimg').attr("src", e.target.result);
                            localStorage.base64String=e.target.result;
                            $('#base').text(e.target.result);
                        };
                        FR.readAsDataURL(this.files[0]);
                    }
                }
                $(document).ready(function(){
                    $("#myid").change(readImage);
                });
            </script>    
            <img id="myimg" src="" height="100px" width="100px" />
            <div id="base" style="display:none"></div>

              <label class="item item-input"><input type="file" ng-model="user.photo" id="myid" placeholder="Choose Image File"> </label>
              <label class="item item-input"><input type="password" ng-model="user.contactno" placeholder="Contact Number"> </label>
            </div>

            <div class="loginButton"><button class="button ion-person button-block button-balanced" ng-click="register(user);"> Register </button>  </div>
      </div>
  </div>



  </ion-content>
</ion-view>

Controller.js

angular.module('starter.controllers', [])
.controller('doRegistrationCtrl', function($scope,$http, $stateParams , Profiles) {

        $scope.register = function(user) {

        if(typeof(user)=='undefined'){
            $scope.showAlert('Please fill username and password to proceed.');  
            return false;
        }
        var jsonString={};
        jsonString.uname=user.username;
        jsonString.pass=user.password;

        jsonString.photo=localStorage.base64String; //here my base64 image code will be there 
        jsonString.contact=user.contactno;

        $http.post("http://nightfoxtechnologies.in/locationbasedreminder/index.php", {
        action: "doRegister",
        data: JSON.stringify(jsonString)
    })
        .then(function(response) {
            //First function handles success
            console.log("suucess:::"+JSON.stringify(response.data));

            $location.path('/app/dashboard');
        }, function(response) {
            //Second function handles error
            $scope.showAlert('Invalid username or password.');  
        });


    };
    $scope.profile = Profiles.get($stateParams.profileId);
})

Answer 1

即使你使用$ http.post（），你也会在URL本身的querystring参数中发送整个内容。将其移出GET并进入POST：

$http.post("http://nightfoxtechnologies.in/locationbasedreminder/index.php" {
    action: "doRegister",
    data: jsonString
})
.then();

Answer 2

或者您可以将Cordova file transfer用于离子应用

无法将base64图像代码发送到数据库

2 个答案: