本文主要使用cordova實現拍照上傳，拍照上傳或從資料夾中選擇上傳圖片

流程：拍照或選擇圖片===>獲取本機路徑==>向伺服器上傳圖片，獲取伺服器上圖片路徑

一、環境準備

  安裝 cordova-plugin-camera 外掛
        該外掛用於呼叫裝置攝像

cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera

安裝File外掛

此外掛實現了一個File API，允許對駐留在裝置上的檔案進行讀/寫訪問。

$  ionic cordova plugin add cordova-plugin-file
$ npm install --save @ionic-native/file

安裝File Transfer外掛

此外掛允許您上載和下載檔案。

$ ionic cordova plugin add cordova-plugin-file-transfer
$ npm install --save @ionic-native/file-transfer

安裝imagePicker外掛

此外掛用來選取檔案圖片

$ ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message"
$ npm install --save @ionic-native/image-picker
 

二、在App.module.ts中注入申明

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

// 禁止橫屏
import {ScreenOrientation} from "@ionic-native/screen-orientation";

import { HttpClientModule } from "@angular/common/http";
import { PubProvider } from '../providers/pub/pub';
import { CookieService } from "ngx-cookie-service";


import { ComponentsModule } from "../components/components.module";
import { DirectivesModule } from "../directives/directives.module";
import { CityProvider } from '../providers/city-data/city-data';
import { TimeProvider } from '../providers/time/time';
import { LocationProvider } from '../providers/location/location';

import { Camera } from "@ionic-native/camera";
import { File } from "@ionic-native/file";
import { FileTransfer } from "@ionic-native/file-transfer";
import { ImagePicker } from "@ionic-native/image-picker";

import { AppVersion } from '@ionic-native/app-version';
@NgModule({
  declarations: [
    MyApp,
    TabsPage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp,{//配置子頁面隱藏tabs
      backButtonText:'',
      tabsHideOnSubPages:'true'
    }),
    ComponentsModule,
    DirectivesModule,
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    CookieService,
    PubProvider,
    CityProvider,
    TimeProvider,
    LocationProvider,
    AppVersion,

//我是照相與選取檔案
    Camera,
    File,
    FileTransfer,
    ImagePicker,
    // 禁止橫屏
    ScreenOrientation,
  ]
})
export class AppModule {}
 

三、html

<ion-header>

  <ion-navbar>
    <ion-title>camera</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>

  <button ion-button (click)="openCamera()">開啟攝像頭</button>
  <button ion-button (click)="upload()">檔案上傳</button>
  <button ion-button (click)="download()">檔案下載</button>

  <div>
    <img src="{{imgUrl}}" />
  </div>

</ion-content>

四、ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ToastController } from 'ionic-angular';

import { PubProvider } from "../../providers/pub/pub";

import { Camera,CameraOptions } from "@ionic-native/camera";
import { File } from "@ionic-native/file";
import { FileTransfer,FileUploadOptions,FileTransferObject } from "@ionic-native/file-transfer";
import { ImagePicker } from "@ionic-native/image-picker";
@IonicPage()
@Component({
  selector: 'page-m-s-info',
  templateUrl: 'm-s-info.html',
})
export class MSInfoPage {
 
  public url=this.pub.interfice;//IP地址
  public imgUrl:string;//圖片地址 
  public infoArry=[];
  
  fileTransfer: FileTransferObject = this.transfer.create();

  constructor(public navCtrl: NavController,
     public navParams: NavParams,
     private pub:PubProvider,
    private camera:Camera,
    private transfer:FileTransfer,private file:File,
    private imagePicker:ImagePicker
  ) {
      
  }


   //開啟攝像頭
   openCamera(){
    const options: CameraOptions = {
      quality: 90,                                                   //相片質量 0 -100
      destinationType: this.camera.DestinationType.FILE_URI,        //DATA_URL 是 base64   FILE_URI 是檔案路徑
      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) => {

      // If it's base64:
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      this.imgUrl = base64Image;

      //If it's file URI
      // this.imgUrl = imageData;


      this.upload();

    }, (err) => {
      // Handle error
    });
  }


  //開啟資料夾選取圖片
  openFile(){
    var options={
      maximumImagesCount: 1,//選擇一張圖片
      width: 200,
      height: 200,
      quality: 100
  }
  var temp = '';
  this.imagePicker.getPictures(options).then((results) => {
    for (var i = 0; i < results.length; i++) {
        temp=results[i];
    }
     // If it's base64:
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      this.imgUrl = base64Image;

      //If it's file URI
      // this.imgUrl = imageData;

    this.upload();
  }, (err) => { });
  }

//檔案上傳
  upload(){
    let options: FileUploadOptions = {
      fileKey: 'file',
      fileName: 'header-img.jpg',   //檔名稱
      headers: {},
      //如果上傳需要傳引數，寫在這
      params: {
        
      }
    };

    this.fileTransfer.upload(this.imgUrl, this.url+'UpLoad/UploadProductImg', options)
      .then((data) => {

        console.log(data);//解析伺服器返回的圖片路徑
        var returnObj=JSON.parse(data.response);

        this.imgUrl=this.url+returnObj.Data;
        
      }, (err) => {
        
      });
  }

}