Ionic3 拍照上传

spilledyear

发布于 2018-08-21 06:59:18

1.4K00

代码可运行

文章被收录于专栏：小白鼠小白鼠

运行总次数：0

代码可运行

本文主要介绍使用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

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',
}
这也是后台接口需要的参数，具体需要什么参数，要不要传参数，都是以你的后台接口为依据，在测试过程中如果不太如意，看看是不是后台接口的问题。
之后会写一篇文章专门介绍一个简单的后台接口。