ionic2 文件上传 拍照 录音 拍摄视频 笔记

一、文件上传
private transfer: FileTransfer  //上传文件用到的类
/**
fileUrl 
url 文件上传地址
options 可选参数
**/
//参数
let options: FileUploadOptions = {  
  chunkedMode: false,  //是否是在流模式下传送数据 default true
  fileKey: 'file',  
  fileName: fileName,  //服务器保存该文件时用的名字（文件名）
  params: {  //自己可另外加的参数
    userId: this.globalService.user.toString(), 
    fileType,
    fileName: fileName 
  }
};
options.headers = {  
  Connection: "close"
}；
fileTransfer.upload(fileUrl, url, options)  

二、拍照

private camera: Camera, //拍照用到的类

const options: CameraOptions = {
  quality: 50,  //画质 范围0-100 default 50
  destinationType: this.camera.DestinationType.FILE_URI, // 选择返回 值的类型 FILE_URI 为 图片文件的URI
  encodingType: this.camera.EncodingType.JPEG, // 图片格式 JPEG PNG 
  mediaType: this.camera.MediaType.PICTURE  //多媒体类型, VIDEO  PICTURE
};

return this.camera.getPicture(options).then(value=>{}) //拍照 或者库中选取 照片 

//照片显示
private photoViewer: PhotoViewer //照片显示用到的类
// path 照片的绝对路径， title设置为 undefined   share:false 表示 照片分享按钮不显示
this.photoViewer.show(path, undefined, {share: false}); 

三、录音

private media: Media //录音用到的类  和音频 播放用到的类

let file: MediaObject;
let name: string = `${new Date().getTime()}.mp3`;
  //`${this.fileProvider.getSoundsDir()}/${name}`录音文件的绝对地址 
file = this.media.create(`${this.fileProvider.getSoundsDir()}/${name}`)
file.startRecord();
 
//结束录音 方法核心代码
if (file instanceof MediaObject) {
  try {
    (<MediaObject>file).stopRecord();
    (<MediaObject>file).release();
    return Promise.resolve(true);
  } catch (err) {
    console.error(err);
    return Promise.reject(err);
  }
}
设置录音时长： 开始录音之后调用setTimeOut 结束录音
window.setTimeout(() => file.stopRecord.....  , 15000);

播放音频
let file: MediaObject;
//name url文件的绝对uri
file = this.media.create(`${name}`); 
file.play(); //文件播放 

示例：

public playAudio(name: string): Promise<any> {
  const error: string = 'failure to play audio';
  return new Promise((resolve, reject) => {
    let file: MediaObject;
    try {
      // Create a Media instance.  Expects path to file or url as argument
      // We can optionally pass a second argument to track the status of the media
      file = this.media.create(`${name}`);
      if (!file) {
        return reject(error);
      }
      file.play();
      return resolve(file);
    }
    catch (err) {
      console.error(err);
      if (file) {
        file.release();
      }
      return reject(err);
    }
  });
}

四、视频的播放与拍摄

private mediaCapture: MediaCapture 拍摄视频用到的类
/**
 *  拍视频
 * @param taskId
 * @returns {Promise<TResult>} 文件地址 以及文件名
 */
public takeVideo(): Promise<any> {
  let options: CaptureVideoOptions = {limit: 1, duration: 10}; //limit 一次只拍摄一个视频，duration:视频的拍摄最长时间
  return this.mediaCapture.captureVideo(options)
    .then(
      (data: MediaFile[]) => { //拍摄成功后返回的实体 数组
        console.log(data)
        // Promise.reject('success to save the db')
        let path: string = data[0].fullPath.toString();  // MediaFile.fullPath 表示视频的绝对路径
        return Promise.resolve(path);
      },
      (err: CaptureError) => {
        console.error(err);
        return Promise.reject(err);
      }
    )
    .then(............)
}

视频播放
/**
 * 播放视频
 * @param {string} path   文件的绝对路径 
 * @returns {Promise<any>}
 */
private videoPlayer: VideoPlayer //视频播放用到的类

public playVideo(path: string): Promise<any> {
  return new Promise((resolve, reject) => {//Playing a video.
    this.videoPlayer.play(path).then(() => {
      console.log('video completed');
      return reject('video completed');
    }).catch(err => {
      console.log(err);
      return reject(err);
    });
  });
}

上传文件 示例

/**
 * 上传多媒体文件2.0
 * @param media 数据库中的实体类
 * @returns {Promise<T>}
 */
public uploadMediaV2(media: MyMedia): Promise<string> {
  return new Promise((resolve, reject) => {
    this.configService.getFileServerUri()  //获取 服务器url 
      .then(data => {
        let url: string = data + `/wap/v2/fs/upload`; //上传照片的路径
        let fileUrl: string;  //文件路径
        let fileType: string;  //文件类型
        switch (media.mediaType) {  
          case MediaType.Picture: //图片
            fileUrl = media.name;
            fileType = 'image';
            break;
          case MediaType.Audio: //音频
            fileUrl = `${this.fileService.getSoundsDir()}/${media.fileName}`;  
            fileType = 'sound';
            break;
          case MediaType.Video:  //视频
            fileUrl = media.name;
            fileType = 'video';
            break;
          default:
            return reject('type is error');
        }
        let fileName: string = media.fileName;
        const fileTransfer: FileTransferObject = this.transfer.create();
        let options: FileUploadOptions = {
          chunkedMode: false,
          fileKey: 'file',
          fileName: fileName,
          params: {
            userId: this.globalService.user.toString(),
            fileType,
            fileName: fileName
          }
        };
        options.headers = {
          Connection: "close"
        };
        console.log(`${this.TAG} file upload url`, `${url}  ${fileName} ${media.fileName}`);
        fileTransfer.upload(fileUrl, url, options)  //文件上传
          .then((data) => {
            // success
            console.log(`${fileName} ${media.fileName} ${data}`);
            let body = JSON.parse(data.response);
            if (body instanceof Array
              && body.length > 0
              && body[0].fileId
              && body[0].url
              && body[0].downloadUrl
              && body[0].fileType
              && body[0].fileHash
              && body[0].originFileName) {
              media.fileUrl = body[0].downloadUrl;
              media.previewUrl = body[0].url;
              media.fileType = body[0].fileType;
              media.fileHash = body[0].fileHash;
              media.originFileName = body[0].originFileName;
              media.fileSize = body[0].fileSize;
              // media.extendedInfo = body;
              resolve(body[0].fileId);
            } else {
              reject(body.message ? body.message : "failure to uploadMedia");
            }
          }, (err) => {
            // error
            console.error(`upload file ${fileName}  ${err}`);
            console.log(`upload file ${fileName}  ${err}`);
            reject(err);
          });
      })
      .catch(error => reject(error));
  });
}