如何從使用 Ionic Framework 中的 Camera Plugin 選擇的視頻文件 URI 創建 Blob？

Question

在我的 Ionic 3 應用程序中，我使用相機插件從圖庫中選擇視頻文件。

它將視頻作為FILE_URI ，我需要從該FILE_URI創建一個Blob 。

我正在使用文件插件來實現這一點。

以下是我到目前為止的代碼。

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創建Blob ，如果不可能，則接受任何建議。

Answer 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
});