ionic3项目中调用手机自身摄像头，拍摄照片并上传
**
ionic3项目中调用手机自身摄像头，拍摄照片并上传
**
今天我在研究ionic3手机App开发时，需要调用手机自带的摄像头拍照上传，在百度了一上午之后，***我发现：好多作者写的博客要么有头无尾，要么就是跟着操作一波后，代码报错了！！！！！！我的老天爷鸭，***所以为了让跟我有相同经历的新手们更快的掌握怎样快速调用ionic摄像头接口，我吐血整理了下面这篇文章，让大家少走一些弯路。
话不多说，直接上代码。
哦，对了，我是下载了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页面的测试代码如下：
测试手机摄像头调用功能
![]()
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，到此文章结束！！**小伙伴们可以自己到真机上测试功能是否可用了，要是你们测试失败了，一定不要急着甩锅给我，先看看安装步骤有没有落下的哟！！！如果还是测试出错，那可以私信我，我负责解决！！（小声bb：反正我是调通了，领导还表扬我了，不接受批评，略略略）