php를 사용하여 ionic에서 express 서버로 이미지를 게시 할 수 없습니다

Question

ionic app에서 express server로 사진을 업로드하려고합니다. 우편함을 사용하여 서버를 테스트 할 때 서버가 잘 작동하지만 이온보기에서는 작동하지 않습니다 (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"); 
    } 
    } 


} 

를 사용할 때 서버 로그에서 사후 요청을 수신하지 않습니다

여기에 코드입니다.

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(); 
    } 
    } 

테스트

당신이 실제 하드웨어에서 테스트하지 않았습니다 경우 사용 이온 봉사 방문하여 문제를 처리하도록하십시오. 이온 블로그입니다 Handling CORS issues in Ionic