为什么 Ionic 4 不支持 nativeURL file://

Question

我正在尝试使用 import { File } from '@ionic-native/file/ngx' 从我的 phone 存储中获取视频属性；然后在我尝试在 HTML 中显示 nativeURL 后出现错误。不允许加载本地资源：file:///storage/emulated/0/..

nativeURL image from File plugins

我尝试将 webview 降级为@1.2.1，结果出现白屏问题。然后我将 webview 移除到最新的一个回来。

TS:

import { File } from '@ionic-native/file/ngx';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer/ngx';  
...

constructor(
    ....
  private transfer: FileTransfer, 
  private file: File,
) { }

selectVideo() {
    const options: CameraOptions = {
      mediaType: this.camera.MediaType.VIDEO,
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
    }

    this.camera.getPicture(options)
      .then( async (videoUrl) => {
        if (videoUrl) {
          console.log("Here");
          this.uploadedVideo = null;

          var filename = videoUrl.substr(videoUrl.lastIndexOf('/') + 1);
          var dirpath = videoUrl.substr(0, videoUrl.lastIndexOf('/') + 1);
          console.log('dir', dirpath);
          dirpath = dirpath.includes("file://") ? dirpath : "file://" + dirpath;
          //http://localhost/_app_file_/storage/emulated/0/
          // dirpath = this.win.Ionic.WebView.convertFileSrc(dirpath);
          console.log('new dirpath', dirpath);
          try {

            var dirUrl = await this.file.resolveDirectoryUrl(dirpath);
            var retrievedFile = await this.file.getFile(dirUrl, filename, {});
            console.log(dirUrl);
            console.log(retrievedFile);
          } catch(err) {

            console.log("Error Something went wrong.");
          }


          retrievedFile.file( data => {


              // this.dismissLoader();
              if (data.size > MAX_FILE_SIZE) return console.log("You cannot upload more than 5mb.");
              if (data.type !== ALLOWED_MIME_TYPE) return console.log("Incorrect file type.");

              this.selectedVideo = retrievedFile.nativeURL;
          });
        }
      },
      (err) => {
        console.log(err);
      });
  }

HTML:

<div class="video-section" *ngIf="selectedVideo">
  <video controls [src]="selectedVideo"></video>
  <div class="button-options" *ngIf="!uploadedVideo && !isUploading">
    <button ion-button clear (click)="cancelSelection()">
      <ion-icon name="close-circle" color="danger"></ion-icon>
    </button>
    <button ion-button clear (click)="uploadVideo()">
      <ion-icon name="checkmark-circle" color="secondary"></ion-icon>
    </button>
  </div>
  <div *ngIf="isUploading">
    <div class="uploading">
      <p>
        <ion-spinner name="bubbles"></ion-spinner>
      </p>
      <p>Uploading - {{ uploadPercent }}% Complete</p>
    </div>
    <div class="button-options">
      <button ion-button clear (click)="cancelUpload()">
        <ion-icon name="close-circle" color="danger"></ion-icon>
      </button>
    </div>
  </div>
  <div class="button-options" *ngIf="uploadedVideo">
    <button ion-button clear (click)="cancelSelection()">
    Start Over
    </button>
  </div>
</div>

我想将视频加载到 HTML 视图中。来自这些属性 (nativeURL)

Answer 1

Ionic 不支持它，因为它会产生 CORS 错误。

你可以用这个解决这个问题：

import { WebView } from "@ionic-native/ionic-webview";
[your code]
WebView.convertFileSrc(pathToFile);

Answer 2

要在视频 HTML 元素中显示视频，您需要使用 Cordova 插件获取文件属性。

下面是在 Android 设备中获取文件的工作代码，显示读取的源，然后将 blob 渲染到 DOM。所选文件将被读取并将其放入 Blob 中。然后你可以做任何你想做的事，比如将它发送到 API 端点，或者只在 DOM.

中显示视频

TS:

import { Component, ElementRef } from '@angular/core';
import { FileChooser } from '@ionic-native/file-chooser/ngx';
import { FilePath } from '@ionic-native/file-path/ngx';
import { File } from '@ionic-native/file/ngx';
...

selectedVideo: any;

constructor(
    private fileChooser: FileChooser,
    private filePath: FilePath,
    private file: File,
    private elementRef: ElementRef,
  ) {

}

getFileData(): Promise<any> {
    return this.fileChooser.open().then(fileURI => {
      return this.filePath.resolveNativePath(fileURI).then(_ => {
        return this.file.resolveLocalFilesystemUrl(fileURI).then((fileEntry: any) => {
          return new Promise((resolve, reject) => {
            fileEntry.file(
              (file) => {
                console.log('meta', file);
                let reader = new FileReader();
                reader.onload = () => {
                  console.log('Loaded: ', reader.result);
                  const blobFile = new Blob([reader.result], { type: file.type });
                  resolve(
                    blobFile
                  );
                };
                reader.onerror = error => {
                  console.log('Error: ', error);
                  reject(
                    error
                  );
                };
                reader.onabort = () => {
                  console.log('Aborted');
                };
                reader.readAsArrayBuffer(file);

                // this.file.resolveLocalFilesystemUrl(file['localURL']).then((entry: any) => {
                //   var nativePath = entry.toURL();
                //   console.log('Native URI: ' + nativePath);

                // });
              }, error => {
                console.log(error);              
              }
            );
          });
        });
      });
    });
}

async selectAFile() {
    this.getFileData().then(async blobFile => {
      console.log(blobFile);
      this.selectedVideo = true;
      let video = this.elementRef.nativeElement.querySelector("#video");
      video.src = window.URL.createObjectURL(blobFile);

    }).catch(error => {
      // Something wrong with getting file infomation
      console.log(error);
      this.selectedVideo = false;
    });
}

HTML:

<ion-content>
  <div class="video-selection" padding>
    <p>Please select a video for upload from your gallery</p>
    <ion-button (click)="selectAFile()">Select Video</ion-button>
  </div>
  <video *ngIf="selectedVideo" id="video" controls autoplay></video>
</ion-content>

为什么 Ionic 4 不支持 nativeURL file://

Why Ionic 4 doesnt support nativeURL file://

cordova

ionic-framework

cordova-plugins

angular

ionic4