本文主要介绍使用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-cameranpm install --save @ionic-native/camera
安装File插件
File 插件基于HTML5 File API规范，提供了一些列的方法用于用于操作文件、目录。
ionic cordova plugin add cordova-plugin-filenpm install --save @ionic-native/file
安装File Transfer插件
File Transfer 插件提供上传和下载文件的方法，使用上很便利
ionic cordova plugin add cordova-plugin-file-transfernpm 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
camera.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的形式上传文件。
作者：spilledyear
链接：https://www.jianshu.com/p/adebe9d9bd9b
随时随地看视频
