首页/Ionic/列表

Ionic3 拍照上传

来源:  2018-04-09 16:02:30    评论: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 {}

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
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权