【技巧】ionic3視頻上傳

本文前提認(rèn)為讀者有基本的angular2基礎(chǔ)盒发，知道怎么import，知道provider怎么用

有人問到視頻上傳這個問題玛迄，那我還是寫一下吧由境，其實基本參考《ionic3多文件上傳》這文章也行，不過對于單文件上傳就不用那么復(fù)雜了，步驟如下：

1虏杰、寫一個上傳文件的后臺服務(wù)

一般開發(fā)到這個功能讥蟆，那上傳后臺服務(wù)一般都提供了的，視乎后臺服務(wù)技術(shù)不同纺阔，這部分我就不詳解也不提供實例代碼了瘸彤。

2、弄一個上傳測試頁面驗證上述服務(wù)是否可用

復(fù)制下面代碼保存為一個html文件笛钝，作為上傳測試頁面质况。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="http://localhost:8080/uploadFile" method="POST" enctype="multipart/form-data">
    <p>單文件上傳：</><br/>
    <input type="file" name="file"/>
    <input type="submit" value = "上傳"/>
</form>
<form method="POST" enctype="multipart/form-data" 
    action="http://localhost:8080/uploadFiles">
    <p>多文件上傳：</>
    <p>文件1：<input type="file" name="file" /></p>
    <p>文件2：<input type="file" name="file" /></p>
    <p><input type="submit" value="上傳" /></p>
</form>
<a href="http://localhost:8080/testDownload">下載</a>
</body>
</html>

注意<input type="file" name="file"/>這段的name的值和后臺上傳服務(wù)的參數(shù)一致

瀏覽器打開這頁面，選擇文件上傳玻靡，在后臺服務(wù)的文件存放位置看看是否接收到文件结榄，如收到表示后臺服務(wù)可用。

image.png

3啃奴、安裝相應(yīng)的Cordova插件

1)這里使用fileTransfer上傳方式潭陪，所以安裝fileTransfer插件及相應(yīng)的ionic-native模塊：

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

2)這里使用camera插件獲取視頻，所以安裝該插件及相應(yīng)的ionic-native模塊：

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

插件安裝完最蕾，記得在app.module.ts中的providers里添加：

providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Transfer,
    Camera
  ]

4依溯、創(chuàng)建一個封裝操作的provider文件

創(chuàng)建一個FileProvider.ts文件（因為camera插件用的是Callback方式，而fileTransfer用了Promise瘟则，所以這里貪方便沿用黎炉，可以統(tǒng)一為同一種方式。）：

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { AlertController, Loading, LoadingController, ActionSheetController } from 'ionic-angular';
import { Transfer, FileUploadOptions, TransferObject } from '@ionic-native/transfer';
import { Camera, CameraOptions } from '@ionic-native/camera';

/*
  Generated class for the FileProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class FileProvider {

  fileTransfer: TransferObject = this.transfer.create();
  loading: Loading;
  constructor(private transfer: Transfer, private alertCtrl:AlertController, 
  private loadingCtrl: LoadingController, private camera: Camera,
  private actionSheetCtrl: ActionSheetController) {
    
  }
  
  /**
   * 上傳文件
   * @param fileUrl 文件路徑
   * @param url 服務(wù)器地址
   * @param options 選項
   */
  public uploadByTransfer(fileUrl: string, url: string, options?: FileUploadOptions){
    if(!options){
      options = {
        fileKey: 'file',
        fileName: fileUrl.substr(fileUrl.lastIndexOf('/')+1)
      };
    }
   return this.fileTransfer.upload(fileUrl, url, options);
  }

  /**
   * 顯示拍照選擇
   */
  choosePhoto(successCallback, errorCallback, options?: CameraOptions) {
    if(!options){
      options = {
          destinationType: this.camera.DestinationType.FILE_URI,
          sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
          encodingType: this.camera.EncodingType.JPEG,
          saveToPhotoAlbum: true,
          mediaType: 1,   //0為圖片醋拧，1為視頻
          targetWidth: 400,
          targetHeight: 400
      };
    }
    let actionSheet = this.actionSheetCtrl.create({
      title: '選擇圖片來源',
      buttons: [
        {
          text: '相冊',
          role: 'destructive',
          handler: () => {
            options.sourceType = this.camera.PictureSourceType.PHOTOLIBRARY;
            this.getLocalImage(successCallback, errorCallback, options);
          }
        },
        {
          text: '拍照',
          handler: () => {
            options.sourceType = this.camera.PictureSourceType.CAMERA
            this.getLocalImage(successCallback, errorCallback, options);
          }
        },
        {
          text: '取消',
          role: 'cancel',
          handler: () => {
            
          }
        }
      ]
    });
    actionSheet.present();
  }

    /**
   * Default is CAMERA. PHOTOLIBRARY : 0, CAMERA : 1, SAVEDPHOTOALBUM : 2
   */
  getLocalImage(successCallback, errorCallback, options: CameraOptions){
    this.camera.getPicture(options).then(imageData => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64:
      // let base64Image = 'data:image/jpeg;base64,' + imageData;
      successCallback(imageData);
    }, err => {
      // Handle error
      errorCallback(err);
    });
  }
}

關(guān)于camera插件參數(shù)看github文檔慷嗜，其中特別注意mediaType的值，1為視頻

5丹壕、在ionic3代碼里調(diào)用：

html添加一個按鈕：

<button ion-button (click)="onTest()">upload</button>

ts里補充按鈕事件：

 onTest(){
    this.fileProvider.choosePhoto(res=>{
      this.fileProvider.uploadByTransfer(res, 'http://后臺上傳服務(wù)')
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
    },err=>{
      console.log(err);
    });
  }

6庆械、最后在真機調(diào)試！真機調(diào)試菌赖！連wifi缭乘！

成功效果如圖: