ionic2拍照和文件上傳

分類：技術 時間:2017-01-20

一月之前，我都不知道ionic為何物。突然公司項目主管讓我看看ionic，剛開始聽到這個消息，非常高興，終於不用死守一門技術了。結果鼓搗了一段時間，也就是搭建了個環境而已，demo的代碼幾乎一句都看不懂，在網上東抄抄，西抄抄，也就寫了一個界面。這樣肯定是不能滿足公司的需求的。過了幾天，項目主管直接讓我用ionic2做一個demo進行演示，下面就是這個小demo。
寫這篇博客的目的，一方面相當於自己的筆記，做個小總結，另一方面如果有需要實現該功能的，如果找不到更好的答案，可以看看這個。

1，需要實現的功能

  1. 簡單的界面搭建
  2. 拍照，並上傳到指定服務器
  3. 從相冊選擇圖片並上傳到指定的服務器
  4. 選擇視頻並上傳

2，搭建界面

效果圖：
itread01
界面很簡單，三個按鈕，幾個input表單，一張圖片，一個提交的按鈕。
因為我連基本得HTML都不怎麽懂，所以搭建這個界面也廢了一番力氣。
下面是界面的代碼：

<ion-header class="action-sheets-basic-page">
  <ion-navbar>
    <ion-title>鐵路應急圖像系統</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding class="action-sheets-basic-page">
  <button ion-button style=" width: 31%;padding: 0px"  (click)="takePhoto()">
    拍照
  </button>
  <button ion-button style="width: 31%;padding: 0px" (click)="choosePhoto()">
    選擇照片
  </button>
  <button ion-button  style="width: 31%;padding: 0px" (click)="chooseVideo()">
    選擇視頻
  </button>


    <form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)" novalidate>
        <ion-item [class.error]="!tieluxian.valid && tieluxian.touched">
            <ion-label>鐵路線：</ion-label>
            <ion-input type="text"  value="" [formControl]="tieluxian" clearInput=true></ion-input>
        </ion-item>

        <ion-item>
            <ion-label>鐵路站：</ion-label>
            <ion-input type="text" value="" [formControl]="tieluzhan" clearInput=true></ion-input>
        </ion-item>

        <ion-item>
            <ion-label>上報人：</ion-label>
            <ion-input type="text" value="" [formControl]="shangbaoren" clearInput=true></ion-input>
        </ion-item>

        <ion-item>
            <ion-label>公裏標：</ion-label>
            <ion-input type="text" value="" [formControl]="gonglibiao" clearInput=true></ion-input>
        </ion-item>

        <ion-item>
            <ion-label>事件描述：</ion-label>
            <ion-input  type="text" value="" [formControl]="shijianmiaoshu" clearInput=true></ion-input>
        </ion-item>

        <ion-avatar style="text-align: center; " >
            <img [src]="profilePicture" style="margin: 5px auto;border-radius: 5% ;max-width: 70%; max-height: 30%" />
        </ion-avatar>

        <button ion-button block color="secondary" type="submit" [disabled]="!loginForm.valid">上傳</button>
    </form>



</ion-content>

關於button平分寬度，寬度應該是每個33%，但是因為ionic2中的button貌似內置了margin之類的屬性吧，button額外占用一定的寬度。
按鈕的點擊事件比較簡單，一個click一個方法名。
比較復雜的是表單了，但是看看標簽和後面的代碼，就能知道怎麽操作了，具體的屬性我也不太懂。

3，導入cordova插件

用到的插件就三個，一個是關於拍照的，另兩個是關於文件上傳的。
在項目的根目錄下，打開cmd指令，輸入：

ionic plugin add cordova-plugin-file-transfer

這個指令實際會下載兩個插件，一個插件是cordova-plugin-file，另一個插件是cordova-plugin-file-transfer。
安裝camera插件的指令：

ionic plugin add cordova-plugin-camera

其實要是能通過其他方式獲得這些文件，直接復制到plugins目錄下也是可以的，有的時候下載會非常慢。
官網關於文件傳輸和照相機的文檔：
文檔傳輸，
照相機

ionic2使用typescript作為腳本，和javascript有一定的差別，所以最好多看看官方的文檔，只有官方的文檔才是最新的。
下載之後，需要用import導入需要用到的類

import { Camera } from 'ionic-native';
import { Transfer } from 'ionic-native';
import { FileUploadOptions } from 'ionic-native';

5，TypeScript代碼

import { Component } from '@angular/core';

import { Platform, ActionSheetController } from 'ionic-angular';
import { NavController } from 'ionic-angular';

import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import {NgZone} from 'angular2/core';
import { Camera } from 'ionic-native';
import { Transfer } from 'ionic-native';
import { FileUploadOptions } from 'ionic-native';


@Component({
  templateUrl: 'basic.html'
})
export class BasicPage {
/*  constructor(public platform: Platform, public actionsheetCtrl: ActionSheetController) {

  }*/

  loginForm: FormGroup;
  tieluxian: any;
  tieluzhan: any;
  shangbaoren: any;
  gonglibiao: any;
  shijianmiaoshu:any;
  public path;
  /*profilePicture: any = "https://www.gravatar.com/avatar/";*/
  //給image設置默認的圖片
  profilePicture: any="assets/img/live.jpg";




  constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {
    this.loginForm = formBuilder.group({
      /**
       * 表單的操作，方括號裏面的參數是對輸入的要求
       */
      tieluxian: ['', Validators.compose([Validators.minLength(1),, Validators.required])],
      tieluzhan: ['', Validators.compose([Validators.required, Validators.minLength(1)])],
      shangbaoren: ['', Validators.compose([Validators.required, Validators.minLength(1)])],
      gonglibiao: ['', Validators.compose([Validators.required, Validators.minLength(1)])],
      shijianmiaoshu: ['', Validators.compose([Validators.required, Validators.minLength(1)])],
    })

    this.tieluxian = this.loginForm.controls['tieluxian'];
    this.tieluzhan = this.loginForm.controls['tieluzhan'];
    this.shangbaoren = this.loginForm.controls['shangbaoren'];
    this.gonglibiao = this.loginForm.controls['gonglibiao'];
    this.shijianmiaoshu = this.loginForm.controls['shijianmiaoshu'];

  /*  this.zone = ngzone;
    this.image = null;*/
  }

  /**
   * 表達提交的方法名和html總標簽中寫得要一樣，通過value，可以得表達裏面輸入的值
   * @param value
   */
  login(value) {
    var tielu=value.tieluxian;
    alert(tielu);
    const fileTransfer = new Transfer();
    /**
     * 上傳文件時攜帶參數，這個是可選項。
     */
    var options: any;
    options = {
      fileKey: 'file',
      fileName: 'name.jpg',
      /*value1: "&reporter=" + "12306" + "&desc="
      + "test" + "&railwaybureau=057"
      + "&spot= " + "&railwaystation= "
      + "&railwayline= " + "&kmdesc= ",*/
      reporter:value.shangbaoren,
      desc:value.shijianmiaoshu,
      railwaybureau:"參數",
      spot:"ok",
      railwaystation:value.tieluzhan,
      railwayline:"railwayline",
      kmdesc:value.gonglibiao,
      headers: {}
  }
    var reqUri = "http://10.28.0.210:8080/uploadCenter.jsp";
    //第一個參數是文件的路徑，第二個參數是服務器的url，第二個參數也可以是encodeURI(reqUri)
    fileTransfer.upload(this.path, reqUri, options).then((data) => {
      alert("正在上傳");
        }, (err) => {
      alert("出錯啦");
        });
  }







  takePhoto() {
    var options = {
      // Some common settings are 20, 50, and 100
      quality: 50,
      destinationType: Camera.DestinationType.FILE_URI,
      // In this app, dynamically set the picture source, Camera or photo gallery

      encodingType: Camera.EncodingType.JPEG,
      mediaType: Camera.MediaType.PICTURE,
      saveToPhotoAlbum:true,
      sourceType:Camera.PictureSourceType.CAMERA,//拍照時，此參數必須有，否則拍照之後報錯，照片不能保存

      correctOrientation: true  //Corrects Android orientation quirks
    }
    /**
     * imageData就是照片的路徑，關於這個imageData還有一些細微的用法，可以參考官方的文檔。
     */
    Camera.getPicture(options).then((imageData) => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64:
      let base64Image =  imageData;
      this.path = base64Image;//給全局的文件路徑賦值。
      this.profilePicture=base64Image;//給image設置source。
      alert(this.path);

    /*  this.zone.run(() => this.image = base64Image);*/
    }, (err) => {
      // Handle error，出錯後，在此打印出錯的信息。
      alert( err.toString());
    });
  }
  choosePhoto() {


    var options = {
      // Some common settings are 20, 50, and 100
      quality: 50,
      destinationType: Camera.DestinationType.FILE_URI,
      // In this app, dynamically set the picture source, Camera or photo gallery
      sourceType:0,//0對應的值為PHOTOLIBRARY ，即打開相冊
      encodingType: Camera.EncodingType.JPEG,
      mediaType: Camera.MediaType.PICTURE,
      allowEdit: true,
      correctOrientation: true  //Corrects Android orientation quirks
    }
    Camera.getPicture(options).then((imageData) => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64:
      let base64Image =  imageData;
      this.path = base64Image;
      this.profilePicture=base64Image;
      alert(base64Image);
    }, (err) => {
      // Handle error
    });

  }
  chooseVideo() {
    var options = {
      // Some common settings are 20, 50, and 100
      quality: 50,
      destinationType: Camera.DestinationType.FILE_URI,
      // In this app, dynamically set the picture source, Camera or photo gallery
      sourceType:0,
      mediaType: 1,//為1時允許選擇視頻文件
      allowEdit: true,
      correctOrientation: true  //Corrects Android orientation quirks
    }
    Camera.getPicture(options).then((imageData) => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64:
      let base64Image =  imageData;
      this.path = base64Image;
      this.profilePicture="assets/img/video.png";//選擇視頻後，image另外顯示一張圖片，目前還無法獲取視頻的第一幀圖片。
      alert(this.path);
    }, (err) => {
      // Handle error
    });

  }

  test(){

  }

  logForm() {

  }




}

6，源碼

源碼


Tags: ionic2 camera 表單 Transfer ionic

文章來源：

ads
ads
相關文章
ads

相關文章

ad