????????今天我在研究ionic3手機(jī)App開發(fā)時(shí)，需要調(diào)用手機(jī)自帶的攝像頭拍照上傳，在百度了一上午之后，我發(fā)現(xiàn)：好多作者寫的博客要么有頭無尾，要么就是跟著操作一波后，代碼報(bào)錯(cuò)了?。。。。?！我的老天爺鴨，所以為了讓跟我有相同經(jīng)歷的新手們更快的掌握怎樣快速調(diào)用ionic攝像頭接口，我吐血整理了下面這篇文章，讓大家少走一些彎路。
? ? ? ? 話不多說，直接上代碼。
? ? ? ? 哦，對了，我是下載了ionic3快速開發(fā)的模板來搭建的項(xiàng)目，小伙伴們可以試試呀！
? ? ? ? 第一步，安裝cordova-plugin-camera插件，在命令行（??！注意要把目錄切換到項(xiàng)目所在目錄）輸入以下代碼
? ? ? ? ? ??1) cordova plugin add?cordova-plugin-camera
? ? ? ? ? ? 2) npm?install?--save?@ionic-native/camera
? ? ? ? 第二步，安裝File插件，在命令行（??！注意要把目錄切換到項(xiàng)目所在目錄）輸入以下代碼
? ? ? ? ? ? ?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文件中（?。?！新手如果不知道這個(gè)文件在哪里，請看以下截圖），需要引入這幾個(gè)插件的provider
? ??????????//手機(jī)攝像頭調(diào)用
????????????import { Camera } from '@ionic-native/camera';
????????????import {File} from '@ionic-native/file';
????????????import { FileTransfer } from '@ionic-native/file-transfer';
這是指引前途的亮點(diǎn)，要注意了哈！??！有的文章可能會說讓引入ng-cordova.js文件，但是我以親身經(jīng)歷告訴大家，用我這種方式來調(diào)用攝像頭不需要引入這個(gè)js文件，為什么呢？因?yàn)槲乙胫?i>報(bào)錯(cuò)了，報(bào)錯(cuò)了，報(bào)錯(cuò)了?。。。。?/i>
? ? ? ? 好了，看到這里呢，說明我們前期的安裝插件的工作已經(jīng)告了一段落，接下來就是寫測試頁面來測試能否調(diào)通攝像頭接口了。
? ? ? ? test.html頁面的測試代碼如下：
<ion-header>
? <ion-navbar>
? ? <ion-title>
? ? ? 測試手機(jī)攝像頭調(diào)用功能
? ? </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.js的測試代碼如下：
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,//相片質(zhì)量 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 ,? ? ? ? //是打開相機(jī)拍照還是打開相冊選擇? 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: {},? ? ? // 如果要傳參數(shù)，寫這里
? ? ? 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，到此文章結(jié)束?。?/b>小伙伴們可以自己到真機(jī)上測試功能是否可用了，要是你們測試失敗了，一定不要急著甩鍋給我，先看看安裝步驟有沒有落下的喲！?。∪绻€是測試出錯(cuò)，那可以私信我，我負(fù)責(zé)解決??！（小聲bb：反正我是調(diào)通了，領(lǐng)導(dǎo)還表揚(yáng)我了，不接受批評，略略略）
? ??????
