Ionic3 拍照上传
2017-10-27 本文已影响3962人
spilledyear
本文主要介绍使用cordova实现拍照上传，走通 “拍照 》预览 》上传 》 下载 ”这个流程。为了方便查看测试结果，需要了解Ionic应用调试的基本方法，有关于Ionic项目Android 调试的详细教程，请参考以下文章：Ionic3 Android调试
ionicAPI
cordovaAPI
界面预览
项目是基于ionic 提供的 tabs模板创建的，除了添加一个 camera page，在camera里面做测试，其它地方基本没有修改过。主要涉及到的demo：拍照 》 预览 》 上传 》 下载
环境准备
安装 cordova-plugin-camera 插件
该插件用于调用设备摄像，cordova-plugin-camera 这是比较新版本的插件，老版本的插件是这个：‘org.apache.cordova.camera’，不过官方已经不推荐使用了。
cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera
安装File插件
File 插件基于HTML5 File API规范，提供了一些列的方法用于用于操作文件、目录。
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，需要引入这几个插件的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
image.pngcamera.html，界面布局，这里主要就是三个测试button，分别对应 拍照、上传、下载功能。还有一个 <img>标签，用于将拍照的照片显示在界面上。
<ion-header>
<ion-navbar>
<ion-title>camera</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>
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,) {
}
/**
* 打开摄像头
*/
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) => {
// 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);
});
}
}
代码分析
文件上传调用 File Transfer 插件的 upload方法
文件下载调用 File Transfer 的 download方法
通过调用 Camera 插件的getPicture方法获取照片
filePath = this.file.externalApplicationStorageDirectory + 'Mac.png';
这里为了测试方便写死了的路径，代表设备下的一个文件，这个文件名字叫做Mac.png。
this.file.externalApplicationStorageDirectory 代表了设备上的一个路径。
以安卓设备为例，我的项目app_id是 com.xxx.aaa，那么this.file.externalApplicationStorageDirectory最终代表的就是这个路径
“file:///storage/emulated/0/Android/data/com.xxx.aaa/ ”
const access_token = xxx;
为了测试了方便，这里直接将用户登录通过验证之后返回的access_token 写到代码里面。在测试中，以实际情况为准，可以没有这个验证，一切看你的后台。
params: {
maxSize: 5000000,
modularName: 'CNL',
allowType: 'jpg;png;pdf;doc;xls;xlsx;docx',
}
这也是后台接口需要的参数，具体需要什么参数，要不要传参数，都是以你的后台接口为依据，在测试过程中如果不太如意，看看是不是后台接口的问题。
之后会写一篇文章专门介绍一个简单的后台接口。
测试文件上传功能，因为在测试文件上传的时候，需要访问设备的原生功能，比如读取文件，因此需要在真机上调试。可是在真机上调试会又一个问题：无法查看日志。这对调试而言是非常不方便的。不过强大的chrom为我们提供了方法，具体方法请参上面给出的链接。
在上面的代码中， 在拍照完成的回调的函数中，直接调用了 this.upload() 方法，该方法负责上传文件，所以在拍照完成后，就会直接将图片上传到服务器，同时图片展示在界面。在本例中，图片是以 base64 的形式上传的，也可以用File URL的形式上传文件。
