【技巧】ionic3视频上传

本文前提认为读者有基本的angular2基础，知道怎么import，知道provider怎么用

有人问到视频上传这个问题，那我还是写一下吧，其实基本参考《ionic3多文件上传》这文章也行，不过对于单文件上传就不用那么复杂了，步骤如下：

1、写一个上传文件的后台服务

一般开发到这个功能，那上传后台服务一般都提供了的，视乎后台服务技术不同，这部分我就不详解也不提供实例代码了。

2、弄一个上传测试页面验证上述服务是否可用

复制下面代码保存为一个html文件，作为上传测试页面。

    
单文件上传：

    
    


    
多文件上传：
    
文件1：
    
文件2：
    


下载

注意这段的name的值和后台上传服务的参数一致

浏览器打开这页面，选择文件上传，在后台服务的文件存放位置看看是否接收到文件，如收到表示后台服务可用。

image.png

3、安装相应的Cordova插件

1)这里使用fileTransfer上传方式，所以安装fileTransfer插件及相应的ionic-native模块：

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

2)这里使用camera插件获取视频，所以安装该插件及相应的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、创建一个封装操作的provider文件

创建一个FileProvider.ts文件（因为camera插件用的是Callback方式，而fileTransfer用了Promise，所以这里贪方便沿用，可以统一为同一种方式。）：

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 服务器地址
   * @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);
    });
  }
}

关于camera插件参数看github文档，其中特别注意mediaType的值，1为视频

5、在ionic3代码里调用：

html添加一个按钮：

upload

ts里补充按钮事件：

 onTest(){
    this.fileProvider.choosePhoto(res=>{
      this.fileProvider.uploadByTransfer(res, 'http://后台上传服务')
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
    },err=>{
      console.log(err);
    });
  }

6、最后在真机调试！真机调试！连wifi！

成功效果如图:

image.png