Ionic3/4中如何上傳圖片（拍照/圖片選擇）

[Talk is cheap. Show me the code]

不想看理論知識請直接移步最後代碼示例。

(本文仍是建議看下總體思路)

最初我寫APP的時候使用 了Ionic3，今天去看了下文檔，Ionic4相對於3的文檔說明更清晰，代碼也更加簡化，社區變得愈來愈好還真是有點小開心呢。但也有批評說Ionic4相對於3更復雜，坑更多。

手機端圖片上傳有兩種方式一種是 拍照上傳 另外一種是 圖片選擇 （請注意這裏與文件選擇的區別） 以後上傳，廢話很少說進入正題。

拍照上傳：

1、前置條件

1.一、引入js和本地依賴，這樣咱們就可使用camera的一些api

npm install --save @ionic-native/cameranpm install --save @ionic-native/camera
複製代碼

1.2添加cordova插件

ionic cordova plugin add cordova-plugin-camera
複製代碼

而後在config.xml中會生成，有時須要你本身添加進去

<plugin name="cordova-plugin-camera" spec="^4.0.3" />
複製代碼

相對android，ios對於權限的控制要更嚴格一些，ios10如下須要你在config.xml底部添加以下代碼：

<!-- Required for iOS 10: Camera permission prompt -->
<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
    <string>Used to take pictures</string>
</edit-config>
複製代碼

2、實現思路以及邏輯

1.調用攝像頭，拍攝圖片

2.將

this.camera.getPicture(options).then(()=>{})
複製代碼

返回的base64的圖片傳給後臺，請求成功之後，這裏須要後臺配合咱們返回一個圖片的縮略圖URL，以方便咱們回顯到頁面上。 固然Ionic4自己也提供了圖片壓縮的功能。使用後端返回的圖片來回顯到頁面上只是爲了確保圖片上傳成功。咱們必須考慮到生產環境中的各類網絡問題。

3.在圖片上傳過程當中咱們須要監控camera插件自己的then和catch狀態，並及時給用戶信息反饋，失敗後調用 this.toast（'圖片上傳失敗'）。

3、代碼示例

3.一、根模塊（app/src/app.module.ts）中注入Camera 。

導入camera模塊

import { Camera } from '@ionic-native/camera';
複製代碼

providers中注入,固然你還能夠看到我爲項目注入的其餘所須要的服務以及配置。

providers: [
    Camera,     //相機拍照
    imagePicker,//圖片選擇
    {provide: ErrorHandler, useClass: IonicErrorHandler},
  ]
複製代碼

HTML頁面

<div id="license" (click)="takePicture()">
      <div class="error-loading" *ngIf="uploadLinFail" >
    	 <img src="assets/img/login/loading.gif" alt="" class="camera">
    	 圖片上傳中..
      </div>
      <img class="img-scale"  [src]="ImageScale" *ngIf="ImageScale"/>
      <div *ngIf="currentImage">
    	  <img src="assets/img/login/camera.png" alt="" class="camera">
    	  營業執照
      </div>
  </div> 
複製代碼

.ts 頁面

01.導入

import { Camera, CameraOptions } from '@ionic-native/camera';
複製代碼

02.constructor中注入

private camera: Camera
複製代碼

03.聲明變量

currentImage:any = true;//點擊以後影藏當前的圖片，顯示loading
ImageScale:any;//後臺返回的縮略圖
uploadLinFail：false;//loading默認false，執行上傳過程當中的加載動畫


複製代碼

04.方法

takePicture() {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    this.camera.getPicture(options).then((imageData) => {
      let ImageBase = 'data:image/jpeg;base64,' + imageData;
      this.currentImage = false;
      this.uploadLinFail = true;
      this.httpPost(ImageBase)	//httpPost上傳圖片的方法將圖片傳參到http請求方法中便可
      
    }, (err) => {
     // Handle error
     console.log("Camera issue:" + err);
     this.toast("圖片上傳失敗")
    });
}
複製代碼

這裏的 httpPost()就是正常的http請求，依據本身的業務進行編寫。

文件上傳：

1、咱們須要注意

文件上傳有一個很嚴重的誤區，圖片上傳是文件上傳的一部分不等於文件上傳，即：文件上傳能夠上傳video，image，apk等。但圖片上傳只能上傳圖片，因此在選擇API的時候要注意：

一、fileTransfer.upload
二、imagePicker.getPictures

這兩個API的區別是很大的，選擇時必定要注意，包括不少博客上都選用fileTransfer。

2、代碼示例

一樣的咱們須要安裝Ionic模塊以便於咱們能夠找到相應的API，安裝Cordova插件以便於咱們能夠在物理設備上運行它。

ionic cordova plugin add cordova-plugin-telerik-imagepicker
npm install @ionic-native/image-picker
複製代碼

.ts文件

constructor(private imagePicker: ImagePicker) { }
複製代碼

使用：

option的參數全部都爲 number 類型

const option：imagePickerOption = {
maximumImagesCount : 1,	// 可選擇的圖片數量默認 15，1爲單選
width : 400  ,		// 圖片寬
height : 500 ,		//圖片高
quality :  80 ,		//圖片質量，質量越高圖片越大,請根據實際狀況選擇
outputType : 0		
/** 文件輸出類型，你能夠選擇圖片URL，或者base64的文件編碼
這裏建議選擇文件編碼  0  ：文件地址  1：圖片base64編碼*/
}

this.imagePicker.getPictures(options).then((results) => {
/**這裏results返回的是一個數組，能夠經過  results.pop()返回最後一個值，shift()返回第一個值，若是你只容許選擇一個圖片的話
，二者都是能夠的，爲了程序健壯性，這裏建議你對results的長度進行判斷處理。*/

  for (var i = 0; i < results.length; i++) {
      console.log('Image URI: ' + results[i]);
  }
}, (err) => { });

複製代碼

若是有任何關於本文的意見，歡迎在文章下方留言，我會在看到的第一時間回覆。