本文主要介紹使用cordova實(shí)現(xiàn)拍照上傳伍玖，走通 “拍照 》預(yù)覽 》上傳 》 下載 ”這個(gè)流程。為了方便查看測(cè)試結(jié)果剿吻，需要了解Ionic應(yīng)用調(diào)試的基本方法窍箍，有關(guān)于Ionic項(xiàng)目Android 調(diào)試的詳細(xì)教程，請(qǐng)參考以下文章：Ionic3 Android調(diào)試
ionicAPI
cordovaAPI
界面預(yù)覽
項(xiàng)目是基于ionic 提供的 tabs模板創(chuàng)建的丽旅，除了添加一個(gè) camera page椰棘，在camera里面做測(cè)試，其它地方基本沒(méi)有修改過(guò)榄笙。主要涉及到的demo：拍照 》 預(yù)覽 》 上傳 》 下載
環(huán)境準(zhǔn)備
安裝 cordova-plugin-camera 插件
該插件用于調(diào)用設(shè)備攝像邪狞，cordova-plugin-camera 這是比較新版本的插件，老版本的插件是這個(gè)：‘org.apache.cordova.camera’茅撞，不過(guò)官方已經(jīng)不推薦使用了帆卓。
cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera
安裝File插件
File 插件基于HTML5 File API規(guī)范巨朦，提供了一些列的方法用于用于操作文件、目錄剑令。
ionic cordova plugin add cordova-plugin-file
npm install --save @ionic-native/file
安裝File Transfer插件
File Transfer 插件提供上傳和下載文件的方法糊啡，使用上很便利
ionic cordova plugin add cordova-plugin-file-transfer
npm install --save @ionic-native/file-transfer
主要代碼
app.module.ts，需要引入這幾個(gè)插件的provider
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { HttpModule } from '@angular/http';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Dialogs } from "@ionic-native/dialogs";
import { Camera } from '@ionic-native/camera';
import {File} from '@ionic-native/file';
import { FileTransfer } from '@ionic-native/file-transfer';
import { AppComponent } from './app.component';
import { StorageService } from "../providers/StorageService";
import { HttpService } from "../providers/HttpService";
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(AppComponent,{
mode: 'md', //ios是'ios'
backButtonText: '',
}),
],
bootstrap: [IonicApp],
entryComponents: [
AppComponent,
],
providers: [
StatusBar,
SplashScreen,
StorageService,
HttpService,
Dialogs,
Camera,
File,
FileTransfer,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
image.png
camera.html吁津，界面布局棚蓄，這里主要就是三個(gè)測(cè)試button，分別對(duì)應(yīng) 拍照碍脏、上傳梭依、下載功能。還有一個(gè) <img>標(biāo)簽潮酒，用于將拍照的照片顯示在界面上。
<ion-header>
<ion-navbar>
<ion-title>camera</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="openCamera()">打開(kāi)攝像頭</button>
<button ion-button (click)="upload()">文件上傳</button>
<button ion-button (click)="download()">文件下載</button>
<div>
<img [src]="path" />
</div>
</ion-content>
camera.ts邪蛔，邏輯代碼
import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} 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';
@IonicPage()
@Component({
selector: 'page-camera',
templateUrl: 'camera.html',
})
export class CameraPage {
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,) {
}
/**
* 打開(kāi)攝像頭
*/
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, //是否保存到相冊(cè)
// sourceType: this.camera.PictureSourceType.CAMERA , //是打開(kāi)相機(jī)拍照還是打開(kāi)相冊(cè)選擇 PHOTOLIBRARY : 相冊(cè)選擇, 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) => {
// 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', //文件名稱(chēng)
headers: {},
// 如果要傳參數(shù)急黎，寫(xiě)這里
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);
});
}
}
代碼分析
文件上傳調(diào)用 File Transfer 插件的 upload方法
文件下載調(diào)用 File Transfer 的 download方法
通過(guò)調(diào)用 Camera 插件的getPicture方法獲取照片
filePath = this.file.externalApplicationStorageDirectory + 'Mac.png';
這里為了測(cè)試方便寫(xiě)死了的路徑，代表設(shè)備下的一個(gè)文件侧到，這個(gè)文件名字叫做Mac.png勃教。
this.file.externalApplicationStorageDirectory 代表了設(shè)備上的一個(gè)路徑。
以安卓設(shè)備為例匠抗，我的項(xiàng)目app_id是 com.xxx.aaa故源，那么this.file.externalApplicationStorageDirectory最終代表的就是這個(gè)路徑
“file:///storage/emulated/0/Android/data/com.xxx.aaa/ ”
const access_token = xxx;
為了測(cè)試了方便，這里直接將用戶(hù)登錄通過(guò)驗(yàn)證之后返回的access_token 寫(xiě)到代碼里面汞贸。在測(cè)試中绳军，以實(shí)際情況為準(zhǔn)，可以沒(méi)有這個(gè)驗(yàn)證矢腻，一切看你的后臺(tái)门驾。
params: {
maxSize: 5000000,
modularName: 'CNL',
allowType: 'jpg;png;pdf;doc;xls;xlsx;docx',
}
這也是后臺(tái)接口需要的參數(shù)，具體需要什么參數(shù)多柑，要不要傳參數(shù)奶是，都是以你的后臺(tái)接口為依據(jù)，在測(cè)試過(guò)程中如果不太如意竣灌，看看是不是后臺(tái)接口的問(wèn)題聂沙。
之后會(huì)寫(xiě)一篇文章專(zhuān)門(mén)介紹一個(gè)簡(jiǎn)單的后臺(tái)接口。
測(cè)試文件上傳功能初嘹，因?yàn)樵跍y(cè)試文件上傳的時(shí)候及汉，需要訪問(wèn)設(shè)備的原生功能，比如讀取文件屯烦，因此需要在真機(jī)上調(diào)試豁生⊥枚荆可是在真機(jī)上調(diào)試會(huì)又一個(gè)問(wèn)題：無(wú)法查看日志。這對(duì)調(diào)試而言是非常不方便的甸箱。不過(guò)強(qiáng)大的chrom為我們提供了方法育叁，具體方法請(qǐng)參上面給出的鏈接。
在上面的代碼中芍殖， 在拍照完成的回調(diào)的函數(shù)中豪嗽，直接調(diào)用了 this.upload() 方法，該方法負(fù)責(zé)上傳文件豌骏，所以在拍照完成后龟梦，就會(huì)直接將圖片上傳到服務(wù)器，同時(shí)圖片展示在界面窃躲。在本例中计贰，圖片是以 base64 的形式上傳的，也可以用File URL的形式上傳文件蒂窒。
