【技巧】ionic3视频上传

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

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

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

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

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

复制下面代码保存为一个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的值和后台上传服务的参数一致

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

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添加一个按钮:

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏bboysoul

如何黑入安卓手机(ezsploit)

安装很简单clone git clone https://github.com/rand0m1ze/ezsploit.git cd ezsploit ch...

1372
来自专栏Samego开发资源

如何搭建私密云存储之ownCloud

7004
来自专栏Golang语言社区

gRPC服务发现&amp;负载均衡

构建高可用、高性能的通信服务,通常采用服务注册与发现、负载均衡和容错处理等机制实现。根据负载均衡实现所在的位置不同,通常可分为以下三种解决方案:

7722
来自专栏Netkiller

PHP高级编程之守护进程

PHP高级编程之守护进程 http://netkiller.github.io/journal/php.daemon.html 摘要 2014-09-01 发表...

3877
来自专栏沃趣科技

ASM 翻译系列第三十四弹:ASM磁盘组重要属性介绍

原作者:Bane Radulovic 译者: 邱大龙 审核: 魏兴华 DBGeeK社区联合出品 原文链接:http://asmsupportguy....

3596
来自专栏行者常至

数据库连接池简单连接

模型      -----     Model 视图      -----     View 控制器  -----     Controller

963
来自专栏Youngxj

QQ红包 1.0.7-xp框架

2622
来自专栏菩提树下的杨过

druid 数据源 使用属性文件的一个坑

直接上代码: <bean id="propertiesFactoryBean" class="org.springframework.bea...

2238
来自专栏本立2道生

bootsect及setup

硬件逻辑设计为加电瞬间强行设置:CS=0xF000,IP=0xFFF0,CS:IP=0xFFFF0

1033
来自专栏逸鹏说道

Winserver下的Hyper-v “未在远程桌面会话中捕获到鼠标”

异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 服务器相关的知识点:http://ww...

4018

扫码关注云+社区

领取腾讯云代金券