Question

我正在使用离子框架开发我的移动应用程序，我希望它通过ajax连接到我的API。 Currenty，在移动端，我正在使用Ionic Framework，我想上传一个图像并通过ajax将其传递给我的api。我正在使用Cordova进行上传，但似乎它没有找到我指出的网址。

这是HTML

<ion-footer-bar class="bar bar-positive">
  <div class="button-bar">
    <button class="button icon-left ion-upload" ng-click="uploadImage()" ng-disabled="image === null">Upload</button>
  </div>
</ion-footer-bar>

这里是控制器中的uploadImage()功能（刚刚复制了网站中的代码。忘了在哪里）编辑： 添加了targetPath

$scope.uploadImage = function() {
    // Destination URL
    var url = "http://192.168.0.19/identificare_api/public/api/plants/image";
   var targetPath = $scope.pathForImage($scope.image);
    // File name only
   var filename = $scope.image;

   var options = {
       fileKey: "file",
       fileName: filename,
       chunkedMode: false,
       mimeType: "multipart/form-data",
       params : {'fileName': filename}
    };

    $cordovaFileTransfer.upload(url, targetPath, options).then(function(result) {
    var jsonparse = JSON.parse(result);
    $scope.showAlert(jsonparse);
}

但是在上传部分，我想在ajax中指明网址的方法，但问题是我不知道放入data的内容。

$.ajax({
     url: "http://192.168.0.19/identificare_api/public/api/plants/image",
     type: 'POST',
     data: 
     success:function(json){
       var jsonparse = JSON.parse(json);
       alert(jsonparse);
     },
     error:function(){
         alert("Error");
     }
});

有人可以帮我解决这个问题吗？

更新： 在此处应用@ Blauharley的评论 我这里有另一个问题。我在API端返回了$_FILES['image']['tmp_name']，但它什么也没有返回，但是当我返回$_FILES['image']['name']时，它返回my_image.jpg。为什么它没有tmp_name？

$scope.uploadImage = function() {

// File for Upload
var targetPath = $scope.pathForImage($scope.image);

$scope.getBase64ImageByURL(targetPath).then(function(base64Image){
  var blob = $scope.base64ToBlob(base64Image,'image/jpeg');
  var fd = new FormData();
  fd.append('image', blob, "my_image.jpg");
  fd.append('user_token', "rLUrh37rfTozuBxmemHtlKMgH");

  $.ajax({
    url: 'http://192.168.0.19/identificare_api/public/api/plants/image',
    type: 'POST',
    data: fd,
    contentType: false,
    processData: false,
    success:function(res){
      alert(res);
    },
    error:function(err){
      alert("Something's wrong with your api. Come on fix it!");
    }
  });
 });
};

$scope.getBase64ImageByURL = function(url) {
      var dfd = new $.Deferred();
      var xhr = new XMLHttpRequest();
      xhr.responseType = 'blob';
      xhr.onload = function() {
         var reader = new FileReader();
         reader.onloadend = function() {
             dfd.resolve(reader.result);
         }
         reader.readAsDataURL(xhr.response);
      };
      xhr.open('GET', url);
      xhr.send();
      return dfd.promise();
};

$scope.base64ToBlob = function(base64Image,toMimeType) {
      var byteCharacters = atob(base64Image.replace('data:'+toMimeType+';base64,',''));
      var byteNumbers = new Array(byteCharacters.length);
      for (var i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
      }
      var byteArray = new Uint8Array(byteNumbers);
      var blob = new Blob([byteArray], {
          type: toMimeType
      });
 return blob;
};

ADDED： API方

public function image(){
      echo json_encode($_FILES['image']['tmp_name']);
}

使用cordova

0 个答案: