将捕获的视频上传到服务器 angular ionic

问题描述

我正在尝试将捕获的视频从我的 ionic 应用程序上传到服务器。我正在使用cordova 媒体捕获插件。我已经看到了一些文件传输的实现，但插件 self 已被弃用，我正在尝试使用 post 方法。有人告诉我将我的视频路径 URI 转换为 blob，然后将该 blob 附加到 FormData 对象！但我不知道该怎么做。我正在使用的函数在 sendVideo() 下方。我非常感谢您的帮助。

这是我的 .ts 文件

recordVideo() {
this.mediaCapture.captureVideo().then(
  (data: MediaFile[]) => {
    if (data.length > 0) {
      this.copyFiletoLocalDir(data[0].fullPath);
    }
  },(err: CaptureError) => console.error(err)
);
}

copyFiletoLocalDir(fullPath) {
let myPath = fullPath;
// Make sure we copy from the right location
if (fullPath.indexOf('file://') < 0) {
  myPath = 'file://' + fullPath;
}

const ext = myPath.split('.').pop();
const d = Date.Now();
const newName = `${d}.${ext}`;

const name = myPath.substr(myPath.lastIndexOf('/') + 1);
const copyFrom = myPath.substr(0,myPath.lastIndexOf('/') + 1);
const copyTo = this.file.dataDirectory + MEDIA_FOLDER_NAME;

this.file.copyFile(copyFrom,name,copyTo,newName).then(
  success => {
    this.loadFiles();
  },error => {
    console.log('error: ',error);
  }
);
}

openFile(f: FileEntry) {
if (f.name.indexOf('.MOV') > -1 || f.name.indexOf('.mp4') > -1) {
  // E.g: Use the Streaming Media plugin to play a video
  this.streamingMedia.playVideo(f.nativeURL);

  
}} 

sendVideo(blobData,f: FileEntry) {
  var formData = new FormData();
  formData.append('video',blobData,'f:FileEntry');


  // var video = {
  //   video: f.nativeURL
  // }

  return new Promise(resolve => {
    this.api.post('/video-test/upload-video',formData)
      .then(data => {
        alert('yes' + JSON.stringify(data))
        resolve();
      })
      .catch(data => {
        alert('err'+ JSON.stringify(data))

        resolve();
      });
  });
}

和HTML代码

    <ion-header>
    <ion-toolbar class="flex flex-align">
      <ion-buttons slot="start">
       <ion-button  (click)="dismiss()" class="close"> Close </ion-button>
       </ion-buttons>
      </ion-toolbar>
    </ion-header>
   <ion-content>

   <ion-button (click)="recordVideo()"> Capture Video </ion-button>
   <ion-list>
   <ion-item-sliding *ngFor="let f of files">
    <ion-button (click)="sendVideo(f)"> Send Video </ion-button>
    <ion-item (click)="openFile(f)">
      <ion-icon name="videocam" slot="start" *ngIf="f.name.endsWith('MOV') || f.name.endsWith('mp4')"></ion-icon>

      <ion-label class="ion-text-wrap">
        <p>{{ f.name }}</p>
        <p>{{ f.fullPath }}</p>
      </ion-label>
    </ion-item>

    <ion-item-options side="start">
      <ion-item-option (click)="deleteFile(f)" color="danger">
        <ion-icon name="trash" slot="icon-only"></ion-icon>
      </ion-item-option>
    </ion-item-options>

    </ion-item-sliding>
    </ion-list>

    </ion-content>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）