ionic3项目中调用手机自身摄像头，拍摄照片并上传

第一步，安装cordova-plugin-camera插件，在命令行（！！注意要把目录切换到项目所在目录）输入以下代码

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

第二步，安装File插件，在命令行（！！注意要把目录切换到项目所在目录）输入以下代码

1）ionic cordova plugin add cordova-plugin-file 
2）npm install --save @ionic-native/file

第三步，安装File Transfer插件，提供上传和下载文件的方法

 1）ionic cordova plugin add cordova-plugin-file-transfer
 2）npm install --save @ionic-native/file-transfer

第四步，在app.module.ts文件中（新手如果不知道这个文件在哪里，请看以下截图），需要引入这几个插件的provider，先要引入相关的一些包，如下所示

//手机摄像头调用
 import { Camera } from '@ionic-native/camera';
 import {File} from '@ionic-native/file';
 import { FileTransfer } from '@ionic-native/file-transfer';

这是指引前途的亮点，要注意了哈！！！有的文章可能会说让引入ng-cordova.js文件，但是我以亲身经历告诉大家，用我这种方式来调用摄像头不需要引入这个js文件，为什么呢？因为我引入之后报错了，报错了，报错了！！！！！

好了，看到这里呢，说明我们前期的安装插件的工作已经告了一段落，接下来就是写测试页面来测试能否调通摄像头接口了。
test.html页面的测试代码如下：

<ion-header>
  <ion-navbar>
    <ion-title>
      测试手机摄像头调用功能
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <button ion-button (click)="openCamera()">打开摄像头</button>
  <button ion-button (click)="upload()">文件上传</button>
  <button ion-button (click)="download()">文件下载</button>
  <div>
    <img [src]="path" />
  </div>
</ion-content>

test.ts的测试代码如下：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Alert } from 'ionic-angular';
*import {Camera, CameraOptions} from '@ionic-native/camera';
import {FileTransfer, FileUploadOptions, FileTransferObject} from '@ionic-native/file-transfer';
import {File} from '@ionic-native/file';*  //这三个该引的包还是要引哟！！！
import {stringify} from "qs"; //这个包如果出现三个小点点，说明未安装插件，【鼠标放在小点点上会出现让安装这个包的命令，大家安装以下即可，这个包是用来包装参数的，不是此篇文章的重点】安装以下即可
@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {
  path: string;
  access_token: string = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOlsiYXBpLXJlc291cmNlIl0sInVzZXJfbmFtZSI6ImFkbWluIiwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNTA5MTk2OTcyLCJhdXRob3JpdGllcyI6WyJST0xFX1VTRVIiXSwianRpIjoiOWFmYmIyYWItMzdiYi00MTIyLTg2NDAtY2FmMDc1OTRmOGZkIiwiY2xpZW50X2lkIjoiY2xpZW50MiJ9.bJOpK0UjCI1ym32uerR_jKp4pv8aLaOxnTeK_DBjYZU';
  fileTransfer: FileTransferObject = this.transfer.create(); 
  constructor(public navCtrl: NavController,public navParams: NavParams,private camera: Camera,
    private transfer: FileTransfer, private file: File) {
  } 
  //打开摄像头
  openCamera() {   
    const options: CameraOptions = {     
      quality: 90,//相片质量 0 -100
      destinationType: this.camera.DestinationType.DATA_URL, //DATA_URL 是 base64  FILE_URL 是文件路径
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      saveToPhotoAlbum: true,      //是否保存到相册
      //sourceType: this.camera.PictureSourceType.CAMERA ,  //是打开相机拍照还是打开相册选择  PHOTOLIBRARY : 相册选择选择CAMERA : 拍照,
  } 
  this.camera.getPicture(options).then((imageData) => {   
      console.log("got file: " + imageData);      // If it's base64:
      let base64Image = 'data:image/jpeg;base64,' + imageData;     
      this.path = base64Image;      //If it's file URI
      // this.path = imageData;
      this.upload();
    }, (err) => {
      alert("获取图片失败");      // Handle error
    });
  } 
  //文件上传
  upload(){   
    const apiPath = "http://192.168.0.104:9090/api/commons/attach?" + stringify({access_token: this.access_token});   
    let options: FileUploadOptions = {     
      fileKey: 'file',     
      fileName: 'name.jpg',  //文件名称
      headers: {},      // 如果要传参数，写这里
      params: {       
        maxSize: 5000000,       
        modularName: 'CNL',       
        allowType: 'jpg;png;pdf;doc;xls;xlsx;docx',
      }
    };   
    this.fileTransfer.upload(this.path, apiPath, options)
    .then((data) => {       
      console.log(data);
    }, (err) => {
      console.log(err);
    });
  }
  //文件下载
  download(){   
    const url = "http://192.168.0.104:9090/api/fms/sys/attach/file/detail?" + stringify({
      fileId: 17161,
      access_token: this.access_token
    });   
    this.fileTransfer.download(url, this.file.externalApplicationStorageDirectory + 'Mac.png').then((entry) => {
      console.log('download complete: ' + entry.toURL());
    }, (error) => {
      console.log(error);
    });
  }
}

**ok，到此文章结束！！**小伙伴们可以自己到真机上测试功能是否可用了，要是你们测试失败了，一定不要急着甩锅给我，先看看安装步骤有没有落下的哟