phpを使用してイオンサーバーからエクスプレスサーバーに画像を投稿できません

Question

イオンサーバーからエクスプレスサーバーに画像をアップロードしようとしています。 Postmanを使ってテストするとサーバーがうまく動作しますが、イオンビューからは動作しません（Macを持っていないためiPhoneでテストできません）。ここ

はコードです：

import { ActionSheetController, ToastController, Platform, LoadingController, Loading } from 'ionic-angular'; 
import { Injectable } from '@angular/core'; 
import { ApiService } from '../services/api.service'; 

import { File } from '@ionic-native/file'; 
import { Transfer, TransferObject } from '@ionic-native/transfer'; 
import { FilePath } from '@ionic-native/file-path'; 
import { Camera } from '@ionic-native/camera'; 
import { Http, Headers } from '@angular/http'; 
declare var cordova: any; 

@Injectable() 
export class imageService { 
    loading: Loading; 
    image: string = null; 
    imageSelected: Boolean = false; 
    constructor(private http: Http, private camera: Camera, private transfer: Transfer, private file: File, private filePath: FilePath, public actionSheetCtrl: ActionSheetController, public toastCtrl: ToastController, public platform: Platform, public loadingCtrl: LoadingController) { } 




    takePicture(sourceType) { 
    // Create options for the Camera Dialog 
    var options = { 
     destinationType: this.camera.DestinationType.DATA_URL, 
     quality: 50, 
     sourceType: sourceType, 
     saveToPhotoAlbum: false, 
     correctOrientation: true 
    }; 

    // Get the data of an image 
    this.camera.getPicture(options).then((imageData) => { 
     this.image = "data:image/jpeg;base64," + imageData; 
     this.presentToast('Selected Image'); 
     alert("selected image"); 
     this.imageSelected = true; 
     this.uploadImage(); 
    }, (err) => { 
     this.presentToast('Error while selecting image.'); 
     alert("error selecting"); 
    }); 
    } 



    private presentToast(text) { 
    let toast = this.toastCtrl.create({ 
     message: text, 
     duration: 3000, 
     position: 'top' 
    }); 
    toast.present(); 
    } 


    uploadImage() { 
    if (this.imageSelected) { 
     this.presentToast("image is selected"); 
     alert("image is selected"); 
     this.http.post("http://appserver.com:8080/sql_api/profilePic", { image: this.image }, function(err, res){ 
     if(err){ 
      console.log("ERROR", err); 
      alert("Error with request"); 
     }else{ 
      console.log(res); 
      alert("success in callback"); 
      this.presentToast('image posted successfully'); 
     } 
     }); 
    } 
    else { 
     this.presentToast('image not selected'); 
     alert("image not selected"); 
    } 
    } 


} 

それを使用しているとき、私は、サーバーログから任意のPOSTリクエストを受信しません。

Answer 1

ここにはサーバーコードまたは郵便番号のリクエストヘッダー情報はありません。サーバーがjsonリクエストを処理できると仮定します。

をいただきました！間違ってコード

uploadImage() { 
    if (this.imageSelected) { 
     this.presentToast("image is selected"); 
     alert("image is selected"); 

    /* http method on angular is not a simple callback 
    its an observable and this request missing headers also 
    this request will not executed if you not calling subsribe on angular 
    http */ 
    this.http.post("http://appserver.com:8080/sql_api/profilePic",{ image: this.image }, function(err, res){ 
     if(err){ 
     console.log("ERROR", err); 
     alert("Error with request"); 
     }else{ 
     console.log(res); 
     alert("success in callback"); 
     this.presentToast('image posted successfully'); 
     } 
    }); 

    /* change your request like this and make sure your express server 
    can handle json request and parse the body 
    you can look at express body parser to handle another request */ 
    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); 
    this.http.post("http://appserver.com:8080/sql_api/profilePic", 
    { image: this.image },{headers:headers}) 
    .subscribe((res)=>{ 
     // request success here is your response 
     console.log(res); 
     alert("success in callback"); 
     this.presentToast('image posted successfully'); 
     }, 
     err =>{ 
     // handler error 
     console.log("ERROR", err); 
     alert("Error with request"); 
     } 
    ) 
    } 
} 

と私はあなたが別のコンポーネントまたはイオンページがimageServiceからUIコンポーネントを分離するために行うことを示唆しています。 UIインタラクションは角度サービスに含まれてはならないからです。

画像service.ts

import { Injectable } from '@angular/core'; 
import { Http, Headers } from '@angular/http'; 

@Injectable() 
export class ImageService { 

constructor(private http: Http) { } 

uploadImage(image) { 
    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); 
    return this.http.post("http://appserver.com:8080/sql_api/profilePic",{ 
    image: image },{headers:headers}); 
} 
} 

ImagePage.ts

import { Component } from '@angular/core'; 
    import { NavController, NavParams, AlertController, LoadingController, ActionSheetController, ToastController, Platform,Loading} from 'ionic-angular'; 
    import { ImageService } from './image-service'; 
    import { Camera } from '@ionic-native/camera'; 

    /* 
    Generated class for the ImagePage. 

    See http://ionicframework.com/docs/v2/components/#navigation for more info on 
    Ionic pages and navigation. 
    */ 
    @Component({ 
    selector: 'app-image', 
    templateUrl: 'image.html', 
    providers: [ImageService] 
    }) 
    export class ImagePage { 
    loading: Loading; 
    image: string = null; 
    imageSelected: Boolean = false; 

    constructor(private camera: Camera, public actionSheetCtrl: 
    ActionSheetController, public toastCtrl: ToastController, 
    public platform: Platform, public loadingCtrl: LoadingController, 
    private imageService:ImageService) {} 

    takePicture(sourceType) { 
     // Create options for the Camera Dialog 
     var options = { 
     destinationType: this.camera.DestinationType.DATA_URL, 
     quality: 50, 
     sourceType: sourceType, 
     saveToPhotoAlbum: false, 
     correctOrientation: true 
     }; 

     // Get the data of an image 
     this.camera.getPicture(options).then((imageData) => { 
     this.image = "data:image/jpeg;base64," + imageData; 
     this.presentToast('Selected Image'); 
     alert("selected image"); 
     this.imageSelected = true; 
     this.imageService.uploadImage(this.image) 
      .subscribe((res)=>{ 
       // request success here is your response 
       console.log(res); 
       alert("success in callback"); 
       this.presentToast('image posted successfully'); 
      }, 
      err =>{ 
      // handler error 
       console.log("ERROR", err); 
       alert("Error with request"); 
      }); 
     }, (err) => { 
      this.presentToast('Error while selecting image.'); 
      alert("error selecting"); 
     }); 
    } 

    private presentToast(text) { 
     let toast = this.toastCtrl.create({ 
     message: text, 
     duration: 3000, 
     position: 'top' 
     }); 
     toast.present(); 
    } 
    } 

テスト

あなたが実際のハードウェア上でそれをテストしていない再場合は、使用するイオンは、サーブ訪問してcorsの問題を処理することを確認してくださいはイオンブログです Handling CORS issues in Ionic