javascript - 使用ionic 4中的FormData将捕获视频上传到服务器

Question

我已经从Android设备成功捕获了录像，但是无法使用formData将其上传到服务器，并且无法以html显示视频。下面是我的代码:
video.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);
  }
);
}

video.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>

任何帮助非常感谢

Answer 1

FormData只会为您提供具有文件名，URL和...的对象。一旦您提交了formData，其外观将如下所示:

FormData代码:

  const form = document.getElementById('formElem');
  form.onsubmit = (e) => {
    e.preventDefault();


    let formData = new FormData();
    formData.append('section', 'general');
    formData.append('action', 'previewImg');
    // Attach file
    formData.append('image', document.getElementsByTagName('input')[1].files[0]);
    
    const uploadFile = async () => {
      const result = await fetch('./images/',
        {
          method: 'POST',
          body: JSON.stringify(formData),
          headers: {
            'Content-Type': 'multipart/form-data'
          }

        });
      console.log(result)

    }
    uploadFile();
  };

一旦有了文件的数据，就需要使银行端点能够接收和上传(保存)该文件，具体取决于您的后端(如果您使用Node，python，PHP，则需要查找类似的库)上传文件
让我们尝试下面的示例，

isUploading: boolean = false;
uploadPercent: number = 0;
videoFileUpload: FileTransferObject;
loader;

uploadVideo() {
        var url = baseUrl +  "/video/upload";
        
        var filename = this.selectedVideo.substr(this.selectedVideo.lastIndexOf('/') + 1);
          
        var options: FileUploadOptions = {
          fileName: filename,
          fileKey: "video",
          mimeType: "video/mp4"
        }
    
        this.videoFileUpload = this.transfer.create();
    
        this.isUploading = true;
    
        this.videoFileUpload.upload(this.selectedVideo, url, options)
          .then((data)=>{
            this.isUploading = false;
            this.uploadPercent = 0;
            return JSON.parse(data.response);
          })
          .then((data) => {        
            this.uploadedVideo = data.url;
            this.presentAlert("Success", "Video upload was successful.");
          })
          .catch((err)=>{
            this.isUploading = false;
            this.uploadPercent = 0;
            this.presentAlert("Error", "Error uploading video.");
          });
    
        this.videoFileUpload.onProgress((data) => {
          this.uploadPercent = Math.round((data.loaded/data.total) * 100);
        });
    
      }

uploadVideo() :好的，我们已经选择了一个视频，我们已经准备好服务器来接受我们的上传，那么什么阻止了我们上传？没有!!!
在这里，我们利用FileTransfer插件将视频上传到服务器。这部分主要分为两个部分:
一个负责将文件上传到服务器。
另一个负责跟踪上传进度。
资源:
https://forum.ionicframework.com/t/how-can-i-upload-image-from-camera-files-like-multipart-form-data/130663

Tutorial

same Question

same Question with FormData
FormData file uploading