首页 > 解决方案 > 使用 ionic 4 中的 FormData 将捕获视频上传到服务器

问题描述

我已经成功地从我的 android 设备上捕获了视频记录,但无法使用 formData 将其上传到服务器,也无法以 html 格式显示视频。下面是我的代码:

视频.ts

captureVideo() {
let options: CaptureVideoOptions = {
  limit: 1,
  // duration: 30,
};
this.mediaCapture.captureVideo(options).then(
  (res: MediaFile[]) => {
    let capturedFile = res[0];
    this.readVideoFile(capturedFile);
  },
  (err: CaptureError) => console.error(err)
);
}

readVideoFile(file: any) {
//console.log('inside readVideo', file);

var movVideo = {
  uri: file['localURL'].split('/'),
  type: 'video/mp4',
  name: file.name,
  size: file.size,
};
var imageBlob = new Blob([file], movVideo);
const formData = new FormData();
formData.append('file', imageBlob, file.name);
//console.log('FORM DATA 515 ---->', formData.getAll('data'));
this.upload.captureFileUpload(formData).subscribe(
  (res) => {
    // Store the token value in local storage for future use.
    //console.log('------------captureImageFileUpload resp--------', res);
  },
  (err) => {
    //console.log('------------captureImageFileUpload err--------', err);
  }
);
}

视频.html

<ion-icon
    name="videocam"
    class="send"
    slot="end"
    (click)="captureVideo()"
    *ngIf="!isDesktop"
  ></ion-icon>


  <video controls class="chat-video">
   <source src="{{attachment_file_path}}?name={{attachValue.fileName}}" type="{{attachValue.mimeType}}"/>
    Your browser does not support HTML video.
  </video>

任何帮助非常感谢

标签: javascripttypescriptcordovahtml5-videoionic4

解决方案


推荐阅读