Question

没有Ani转移离子2插件

如何使用REST API在离子2中上传图像

Answer 1

public options: CameraOptions = {
        enter code herequality: 100,
        sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
        destinationType: this.camera.DestinationType.FILE_URI,
        encodingType: this.camera.EncodingType.JPEG,
        mediaType: this.camera.MediaType.PICTURE,
        saveToPhotoAlbum: true,
        allowEdit:true,
        correctOrientation:true,
        targetWidth:300,
        targetHeight:150
    }
    takePicture(options){
        this.camera.getPicture(options).then((imageData) => {
            console.log("imageData",imageData);
            this.base64Image = imageData;
        }, (err) => {
            console.log(err);
        });
    }
 add(){
        var formData={
            "title" : this.title,
            "image" : this.base64Image,
            "description" : this.description
        }
        if(this.formgroup.valid == true){
            this.presentLoadingDefault();
            this.service.add(formData).subscribe(
                (data)=>{
                    console.log('data',data);
                    if(data.Code == 200){
                        this.presentToast(data.Message);
                    }else{`enter code here`
                        this.presentToast(data.Message);
                    }
                    this.loading.dismiss();
                    this.navCtrl.pop();
                },
                function (error){
                    console.log("error"+error)
                });
        }
    }

Answer 2

安装Cordova和Ionic Native插件：

ionic cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera


import {Camera, File, CameraOptions} from "ionic-native"; 
import { Myservice } from '../../providers/myservice';

export class HomePage {
  captureDataUrl:any;
  constructor(private Service:Myservice){}
  openCamera() {
    const cameraOptions: CameraOptions = {
     targetHeight:150,
     targetWidth:150,
     allowEdit:true,
     quality: 50,
     destinationType: Camera.DestinationType.DATA_URL,
     encodingType: Camera.EncodingType.JPEG,
     mediaType: Camera.MediaType.PICTURE,
    };

    Camera.getPicture(cameraOptions).then((imageData) => {
      this.captureDataUrl = 'data:image/jpeg;base64,' + imageData;
      console.log("CaptureDataUrl:" + this.captureDataUrl);
      this.upload();
    }, (err) => {
  });
 }

 this.upload(){
   var profildata={
     "name"  :'HR PATEL',
     "image" : this.base64Image   
   }

   this.Service.getSaveImage(profildata).subscribe(
    response => {
      console.log("user add sucessfully");
    },
    err => {
    console.log("err...."+err );
   }
  );  
 }
}

//调用myservice.ts

import { Http, Headers } from '@angular/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class Myservice {
  constructor(public http: Http){}

  getSaveImage(profiledata): Observable<any>{

    let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
    return this.http.post("this api url",{data:profiledata},{headers:headers})
      .map(data=> data.json());
    }
  }
}

如何使用REST API在离子2中上传图像

2 个答案: