ionic拍照上传图片与从文件中选择图片

本文主要使用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) => {
        
      });
  }

}