如何从使用 Ionic 框架中的相机插件选择的视频文件 URI 创建 Blob？

Posted 2023-05-06

【中文标题】如何从使用 Ionic 框架中的相机插件选择的视频文件 URI 创建 Blob？

【英文标题】：How to create a Blob from video File URI selected using Camera Plugin in Ionic Framework?

【发布时间】：2020-04-26 20:23:57

【问题描述】：

在我的 Ionic 3 应用程序中，我使用 Camera Plugin 从图库中选择视频文件。

它以 FILE_URI 的形式提供视频，我需要从该 FILE_URI 创建一个 Blob。

我正在使用 File Plugin 来实现这一点。

下面是我目前的代码。

const options: CameraOptions = 
    mediaType: this.camera.MediaType.VIDEO,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
;
this.camera.getPicture(options)
    .then(async (videoData) => 

        if (videoData) 

            const filename = videoData.substr(videoData.lastIndexOf('/') + 1);
            let dirpath = videoData.substr(0, videoData.lastIndexOf('/') + 1);
            dirpath = dirpath.includes("file://") ? dirpath : "file://" + dirpath;

            try 
                this.file.readAsArrayBuffer(dirpath, filename)
                    .then((res) => 
                        try 
                            const blob = new Blob([res],  type: 'video/mp4' );
                         catch (error) 
                            // TODO: Handle error
                        
                    ).catch((err) => 
                        // TODO: Handle error
                    );
             catch (error) 
                // TODO: Handle error
            
        
    , (err) => 
        // TODO: Handle error
    );

我需要知道是否可以从使用 Camera Plugin 选择的 FILE_URI 和 If不可能接受任何建议。

【参考方案1】：

您可以使用File.ReadAsDataURL。试试这样的：

const options: CameraOptions = 
  mediaType: this.camera.MediaType.VIDEO,
  sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
;

this.camera.getPicture(options).then(async (videoData) => 
  if (videoData) 
    const filename = videoData.substr(videoData.lastIndexOf('/') + 1);
    let dirpath = videoData.substr(0, videoData.lastIndexOf('/') + 1);
    dirpath = dirpath.includes("file://") ? dirpath : "file://" + dirpath;

    try 
      this.file.readAsDataURL(dirpath, filename).then(blob => 
        uploadBlobToServer(blob);

      ).catch((err) =>              
           // TODO: Handle error
      );
      catch (error) 
         // TODO: Handle error
     
  
, (err) => 
    // TODO: Handle error
);