0

我正在尝试从我的 ionic 应用程序将捕获的视频上传到服务器。我正在使用科尔多瓦媒体捕获插件。我已经看到了一些文件传输的实现，但插件本身已被弃用，我正在尝试使用 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>
4

0 回答 0