Ionic Cordova 调用原生 Api 实现拍照上传 图片到服务器功能

 

Ionic 调用 Device 设备 Api 获取手机的设备信息

 

1. 找到对应的Api: https://ionicframework.com/docs/native/device/

 

2. 安装相关的设备插件

 

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

 

3. 在app.module.ts中引入注册相应模块

import { Device } from '@ionic-native/device';

providers: [
    StatusBar,
SplashScreen,
Device,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]

在用到的页面引入看文档使用

import { Device } from '@ionic-native/device'; constructor(private device: Device) { }
...
console.log('Device UUID is: ' + this.device.uuid);

---

Ionic 调用照相机拍照功能。

1、找到对应的 Api: https://ionicframework.com/docs/native/camera/

2、安装相关的插件

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

3、在 app.module.ts 中引入注册相应模块

providers: [ ...
Camera
... ]

参数	类型	说明
quality	Number	保存的图像质量，范围为 0 到 100
destinationType	Number	返回值格式 Camera.DestinationType.DATA_URL 返回 base64 编码 Camera.DestinationType.FILE_URI 返回文件地址

 

sourceType	Number	设置图片来源 Camera.PictureSourceType.CAMERA 摄像机获取 Camera.PictureSourceType.PHOTOLIBRARY 图库选择
allowEdit	Boolean	选择图片完成是否允许编辑
encodingType	Number	JPEG = 0, PNG = 1
targetWidth	Number	缩放图像的宽度(像素)
targetHeight	Number	缩放图像的高度(像素)
mediaType	String	设置媒体的类型
cameraDirection	Number	Back = 0, Front-facing = 1
popoverOptions	String	iOS,iPad 弹出位置
saveToPhotoAlbum	Boolean	是否保存到相册
correctOrientation	Boolean	设置摄像机拍摄的图像是否为正确的方向

 

Ionic4 调用 cordova 插件 cordova-plugin-file-transfer 实现 图片上传

1.安装插件：

 

 ionic cordova plugin add cordova-plugin-file-transfer
 npm install @ionic-native/file-transfer

 

2. app.module.ts 引入依赖注入

import { FileTransfer } from '@ionic-native/file-transfer/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    Geolocation,   
    Device,        
    Camera,
    FileTransfer,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

---

使用：

<ion-header>
  <ion-toolbar>
    <ion-title>
      Tab Three
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

   设备相关插件
    {{myDevice.uuid}}

    <br>
    <br>

    <ion-button (click)="doCamera()">
     执行拍照
    </ion-button>

    <br>
    <img [src]="imgSrc" />
</ion-content>

import { Component } from '@angular/core';

import { Device } from '@ionic-native/device/ngx';

import { Camera, CameraOptions } from '@ionic-native/camera/ngx';


import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer/ngx';


@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {

  public myDevice: any;
  public imgSrc: any;

  constructor(private device: Device, private camera: Camera, private transfer: FileTransfer) {
    this.myDevice = this.device;
  }

  doCamera() {

    const options: CameraOptions = {
      quality: 100,   //质量
      destinationType: this.camera.DestinationType.DATA_URL,   //返回图片的类型  base64  url
      // encodingType: this.camera.EncodingType.JPEG,   //返回格式
      sourceType: this.camera.PictureSourceType.CAMERA,   //从相册选择  还是摄像头拍照
      // mediaType: this.camera.MediaType.PICTURE         //设置媒体的类型
      targetHeight: 400,    //必须加
      targetWidth: 400,    //必须加
      allowEdit: true
    }

    this.camera.getPicture(options).then((imageData) => {
     
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      this.imgSrc = base64Image;

      this.doUpload(base64Image);


    }, (err) => {
      // Handle error

      console.log(err);
    });

  }


  doUpload(fileSrc) {

    const fileTransfer: FileTransferObject = this.transfer.create();

    let options: FileUploadOptions = {
      fileKey: 'file',   
      fileName: 'name.jpg',   //名称
      mimeType: 'image/jpeg',
      httpMethod: "POST",
      params: {
        username: "我是一个测试的名称", 
        age: "21",
        height: "180"
      } /*附带的一些信息*/
      // headers: {}
    }

    var api = 'http://127.0.0.1:8080/imgUpload';

    fileTransfer.upload(fileSrc, api, options)
    .then((data) => {

      console.log(data);
      // success
      alert(JSON.stringify(data));

    }, (err) => {
      // error

      alert(JSON.stringify(err));
    })

  }

}

 其他：

ionic cordova run browser 调试应用

 

ionic cordova run browser 这个命令可以让我们在浏览器上面运行 ionic 项目，并可以调用常用的 api。
如果特殊 api 建议真机调试。如果是拍照 、定位之类的 api 可以使用这种方法调试。

---

问题：

1. 安装cordova-plugin-file-transfer以及其他插件都报错提示信息和node_modules模块相

关错误解决办法。
删除 node_modules , cd 到项目目录 , 重新用 npm install 安装所有的模块

2. 安装其他的模块没有问题，安装cordova-plugin-file-transfer出现错误。多尝试几次，还是不行就切换npm源：

 

尝试npm切换源，然后重新安装

在命令行执行命令，npm install -g nrm，全局安装 nrm。 nrm use taobao 选择源 淘宝为默认源
nrm ls 查看默认源