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

【问题标题】：How to create a Blob from video File URI selected using Camera Plugin in Ionic Framework?如何从使用 Ionic 框架中的相机插件选择的视频文件 URI 创建 Blob？
【发布时间】：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不可能接受任何建议。

【问题讨论】：

标签： android cordova ionic-framework ionic2 ionic3

【解决方案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
});

【讨论】：