ionic3 调取照片机，音频，视频插件 上传服务器

// import { HttpClient } from '@angular/common/http';

import { Injectable } from '@angular/core';

import { ImagePicker } from '@ionic-native/image-picker';//引入插件

import { ActionSheetController, Platform } from 'ionic-angular';

import { Camera } from '@ionic-native/camera'; //引入插件

import { Media, MediaObject } from '@ionic-native/media';

import { File } from '@ionic-native/file'; //引入插件

import { MediaCapture, CaptureVideoOptions, MediaFile, CaptureError, CaptureAudioOptions } from '@ionic-native/media-capture';

import { HttpService, AppGlobal } from '../../providers/http.service';

import { FileTransfer, FileTransferObject, FileUploadOptions } from '@ionic-native/file-transfer';

import { DatePipe } from '@angular/common';

/*

  Generated class for the ProblemReportingProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers

  and Angular DI.

*/

declare var cordova: any;

@Injectable()

export class ProblemReportingProvider {

  isAudioOrVedio = true;

  userParam = {

    "description": "测试",

    "sitePhotos": "测试",

    "phone": "测试",

    "eventTime": null,

    "eventAddress": "测试",

    "appid": "测试",

    "status": 1,

    "remark": "测试",

    "video": null,

    "voice": null

  };

  static _files = []

  private set files(value) {

    ProblemReportingProvider._files;

  }

  private get files() {

    return ProblemReportingProvider._files;

  }

  selectType: any = [];

  playAudio: any = true;

  filemenu = [];

  // public filePath: any; //录音文件的名字

  // public recordData: any; //录音对象

  storageDirectory: string = '';

  fileName: string = '';

  fileTransfer: FileTransferObject = this.transfer.create();

  constructor(private camera: Camera, private imagePicker: ImagePicker,

    public actionSheetCtrl: ActionSheetController, private file: File,

    private media: Media, private mediaCapture: MediaCapture, private httpservice: HttpService, private transfer: FileTransfer, public platform: Platform, ) {

    this.platform.ready().then(() => {

      // make sure this is on a device, not an emulation (e.g. chrome tools device mode)

      if (!this.platform.is('cordova')) {

        return false;

      }

      if (this.platform.is('ios')) {

        this.storageDirectory = cordova.file.tempDirectory;

      }

      else if (this.platform.is('android')) {

        this.storageDirectory = cordova.file.dataDirectory;

      }

      else {

        // exit otherwise, but you could add further types here e.g. Windows

        return false;

      }

    });

    console.log('Hello ProblemReportingProvider Provider');

  }

  // /***************** 选择相册图片功能和拍照功能****/

  // 调用相机时传入的参数

  private cameraOpt = {

    quality: 100,//图片质量

    sourceType: 1,

    saveToPhotoAlbum: true,

    correctOrientation: true,

  };

  // 调用相册时传入的参数

  private imagePickerOpt = {

    maximumImagesCount: 5 - this.selectType.length,//选择一张图片

    quality: 80

  };

  showPicActionSheet() {

    this.useASComponent();

  }

  upload: any = {

    url: 'http://************',          //接收图片的url

    fileKey: '',  //接收图片时的key

    headers: {

      'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8' //不加入 发生错误！！

    },

    params: {},        //需要额外上传的参数

    success: (data) => { alert(data); }, //图片上传成功后的回调

    error: (err) => { },  //图片上传失败后的回调

    listen: () => { }  //监听上传过程

  };

  // 使用ionic中的ActionSheet组件

  private useASComponent() {

    let actionSheet = this.actionSheetCtrl.create({

      title: '选择',

      buttons: [

        {

          text: '拍照',

          role: 'takePhoto',

          handler: () => {

            this.startCamera();

          }

        },

        {

          text: '从手机相册选择',

          role: 'chooseFromAlbum',

          handler: () => {

            this.openImgPicker();

          }

        },

        {

          text: '取消',

          role: 'cancel',

          handler: () => {

            console.log("cancel");

          }

        }

      ]

    });

    actionSheet.present().then(value => {

      return value;

    });;

  }

  // 启动拍照功能

  private startCamera() {

    const thisFrom = this;

    this.camera.getPicture(this.cameraOpt).then((imageData) => {

      this.selectType.push(imageData);

      this.uploadImg(imageData);

      alert('startCamera');

      alert(imageData);

      thisFrom.getCaption(imageData);

      let thisdate = new DatePipe('en-US').transform(new Date(), 'yyyy-MM-dd HH:mm:ss');

      this.filemenu.push({

        name: imageData,

        datetime: thisdate,

        url: AppGlobal.domain + imageData,

        filetype: '图片'

      });

    }, (err) => {

      this.httpservice.toast('ERROR:' + err); //错误：无法使用拍照功能！

    });

  }

  //截取字符

  getCaption(obj) {

    let index = obj.lastIndexOf('\/');

    obj = obj.substring(index + 1, obj.length);

    alert(obj);

    return obj;

  }

  // 打开手机相册

  private openImgPicker() {

    const thisForm = this;

    this.imagePicker.getPictures(this.imagePickerOpt)

      .then((results) => {

        for (var i = 0; i < results.length; i++) {

          thisForm.selectType.push(results[i]);

          this.uploadImg(results[i]);

          alert('startCamera');

          alert(results[i]);

          thisForm.getCaption(results[i])

          let thisdate = new DatePipe('en-US').transform(new Date(), 'yyyy-MM-dd HH:mm:ss');

          this.filemenu.push({

            name: results[i].name,

            datetime: thisdate,

            url: AppGlobal.domain + results[i],

            filetype: '图片'

          });

        }

        // alert('openImgPicker');

        // alert(thisForm.selectType);

      }, (err) => {

        this.httpservice.toast('ERROR:' + err); //错误：无法使用拍照功能！

      });

  }

  // 上传图片

  public uploadImg(path: string) {

    if (!path) {

      return;

    }

    // alert('uploadImg');

    // alert(path);

    // this.fileTransfer = new Transfer();

    let options: any;

    options = {

      fileKey: this.upload.fileKey,

      headers: this.upload.headers,

      // params: this.upload.params

    };

    alert(this.upload.url);

    const thisForm = this;

    this.fileTransfer.upload(path, thisForm.upload.url + '/image', options)

      .then((data) => {

        alert('fileTransfer.upload uploadImg');

        if (this.upload.success) {

          this.upload.success(JSON.parse(data.response));

          alert(this.upload.success(JSON.parse(data.response)));

        }

      }, (err) => {

        if (this.upload.error) {

          this.upload.error(err);

        } else {

          this.httpservice.toast('ERROR:' + err);

        }

      });

  }

  // 停止上传

  stopUpload() {

    if (this.fileTransfer) {

      this.fileTransfer.abort();

    }

  }

  // 删除图片

  onClickDetelePic(i) {

    this.selectType.splice(i, 1);

  }

  /*****************************录制音频*************************************/

  // cordova-plugin-media-capture 的使用

  startRecording_MediaCapture() {

    this.platform.ready().then(() => {

      // const ftObj: FileTransferObject = this.transfer.create();

      // 设置录音参数：duration限制录音长度，单位秒，仅ios有效

      let options: CaptureAudioOptions = { limit: 1, duration: 10 };

      const thisForm = this;

      this.mediaCapture.captureAudio(options)

        .then(

          function (mediaFiles: MediaFile[]) {

            var i, len;

            for (i = 0, len = mediaFiles.length; i < len; i += 1) {

              // alert("Record success! \n\n"

              //  + "file name: " + mediaFiles[i].name + "\n\n"

              //  + "size: " + (mediaFiles[i].size / 1024).toFixed(2) + "KB" + "\n\n"

              //  + "fullPath: " + mediaFiles[i].fullPath + "\n\n"

              //  + "lastModifiedDate: " + (mediaFiles[i].lastModifiedDate) + "\n\n"

              //  + "type: " + mediaFiles[i].type + "\n\n");

              // 上传

              thisForm.fileName = mediaFiles[i].name;

              thisForm.uploadFile(mediaFiles[i].fullPath, '/voile');

            }

          },

      );

    });

  }

  // cordova-plugin-media 的使用

  startRecording_Media() {

    this.platform.ready().then(() => {

      let mediaObj;

      var recordName = this.generateFileName() + ".wav";

      this.fileName = recordName;

      if (this.platform.is('ios')) {

        this.file.createFile(this.file.documentsDirectory, recordName, true).then(() => {

          mediaObj = this.media.create(this.file.documentsDirectory.replace(/^file:\/\//, '') + recordName);

          this.doRecord_Media(mediaObj);

        });

      } else if (this.platform.is('android')) {

        mediaObj = this.media.create(this.file.documentsDirectory || this.file.externalDataDirectory + recordName);

        this.doRecord_Media(mediaObj);

      } else {

        alert("Not cordova!");

        return;

      }

    });

  }

  doRecord_Media(mediaObj: MediaObject) {

    // 开始录音

    mediaObj.startRecord();

    // 监测录音状态的回调

    mediaObj.onStatusUpdate.subscribe(status => this.showRecordStatus(status));

    // 设置录音的长度，单位毫秒，ios / android 均有效

    window.setTimeout(() => mediaObj.stopRecord(), 10 * 1000);

    // 录音成功后的处理，如上传录音

    mediaObj.onSuccess.subscribe(() => {

      this.uploadFile(this.file.documentsDirectory || this.file.externalDataDirectory + this.fileName, '/voile')

      this.isAudioOrVedio = true;

      let thisdate = new DatePipe('en-US').transform(new Date(), 'yyyy-MM-dd HH:mm:ss');

      this.filemenu.push({

        name: this.file.documentsDirectory || this.file.externalDataDirectory + this.fileName,

        datetime: thisdate,

        url: AppGlobal.domain + this.file.documentsDirectory || this.file.externalDataDirectory + this.fileName,

        filetype: this.isAudioOrVedio ? '音频' : '视频'

      })

    });

    // 录音失败后的处理，如提示错误码

    mediaObj.onError.subscribe(error => alert('Record fail! Error: ' + error));

  }

  // 上传 File Transfer Plugin 的使用

  uploadFile(filePath, path) {

    // 设置上传参数

    let options: FileUploadOptions = {

      fileKey: "file",

      fileName: this.fileName,

      mimeType: this.isAudioOrVedio ? "audio/wav" : "vedio/mp4"

    };

    const ftObj: FileTransferObject = this.transfer.create();

    const thisForm = this;

    // alert("filePath:" + filePath);

    ftObj.upload(filePath,

      encodeURI(thisForm.upload.url + path), options).then(

        (data) => {

          alert(JSON.parse(data.response));

        },

        (err) => {

          alert("File upload fail! error:" + err.code);

        });

  }

  // 生成录音文件名的方法：yyyymmddhhmmss(月和日不足两位补0)

  complement(n) { return n < 10 ? '0' + n : n }

  generateFileName() {

    var date = new Date();

    return date.getFullYear().toString() + this.complement(date.getMonth() + 1) + this.complement(date.getDate()) + this.complement(date.getHours()) + this.complement(date.getMinutes()) + this.complement(date.getSeconds());

  }

  // 根据录音状态码返回录音状态的方法

  showRecordStatus(status) {

    var statusStr = "";

    switch (status) {

      case 0:

        statusStr = "None";

        break;

      case 1:

        statusStr = "Start";

        break;

      case 2:

        statusStr = "Running";

        break;

      case 3:

        statusStr = "Paused";

        break;

      case 4:

        statusStr = "Stopped";

        break;

      default:

        statusStr = "None";

    }

    this.httpservice.toast("status: " + statusStr);

  }

  /***********************视频************************** */

  onClikeVedio() {

    let options: CaptureVideoOptions = { limit: 1 };

    const thisForm = this;

    this.mediaCapture.captureVideo(options)

      .then(

        (mediaFiles: MediaFile[]) => {

          var i, len;

          for (i = 0, len = mediaFiles.length; i < len; i += 1) {

            // alert("Record success! \n\n"

            //  + "file name: " + mediaFiles[i].name + "\n\n"

            //  + "size: " + (mediaFiles[i].size / 1024).toFixed(2) + "KB" + "\n\n"

            //  + "fullPath: " + mediaFiles[i].fullPath + "\n\n"

            //  + "lastModifiedDate: " + (mediaFiles[i].lastModifiedDate) + "\n\n"

            //  + "type: " + mediaFiles[i].type + "\n\n");

            // 上传

            thisForm.fileName = mediaFiles[i].name;

            thisForm.uploadFile(mediaFiles[i].fullPath, '/video');

            this.isAudioOrVedio = false;

            let thisdate = new DatePipe('en-US').transform(new Date(), 'yyyy-MM-dd HH:mm:ss');

            this.filemenu.push({

              name: mediaFiles[i].name,

              datetime: thisdate,

              url: AppGlobal.domain + mediaFiles[i].fullPath,

              filetype: this.isAudioOrVedio ? '音频' : '视频'

            })

          }

        },

        (err: CaptureError) => this.httpservice.toast('ERROR:' + err)

      );

  }

}

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,001评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,210评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,874评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,001评论 1赞 291
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,022评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,005评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,929评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,742评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,193评论 1赞 309
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1赞 346
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,305评论 5赞 342
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,911评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2赞 352

推荐阅读更多精彩内容