Question

我试图使用Cordova file plugin来读取保存在移动设备中的图像，这样我就可以获得它的base64编码，我需要远程存储它。问题是resolveLocalFilesystemUrl（）方法，它应该提供一个File Entry对象，而不是似乎返回一个Entry对象，这意味着我不能在其上调用文件。

以下是应该获取File Entry对象的代码，以便我可以使用file方法来读取文件本身。

MediaCapture.captureImage().then((images)=>{
  self.image = images[0].localURL;
  File.resolveLocalFilesystemUrl(self.image).then((entry)=>{
    entry.file(function (file) {
      var reader = new FileReader();

      reader.onloadend = function (encodedFile) {
        var src = encodedFile.target.result;
        src = src.split("base64,");
        var contentAsBase64EncodedString = src[1];
      };
      reader.readAsDataURL(file);
    })
  }).catch((error)=>{
    console.log(error);
  })
})

我收到以下的Typescript错误，它告诉我resolveLocalFilesystemUrl（）正在使用一个没有文件方法的Entry对象进行解析。（插件文档说resolveLocalFilesystemUrl使用File Entry对象解析，并且这样的对象肯定有一个提供文件本身的文件方法）：

Property 'file' does not exist on type 'Entry'.

我已经尝试了我提供resolveLocalFilesystemUrl（）的路径类型。我已经尝试了/ var / mobile / Applications // Documents / path / to / file以及cdvfile：// localhost / temporary / filename行的本地URL的完整路径 - 无法正常工作

所以具体的问题是为什么赢得了解决方案，不能给我提供一个文件输入对象，或者我是如何做到的？更一般地说，如果上述方法不起作用，如何在Ionic 2中读取文件以便我可以获得它的base64版本。

谢谢！

Answer 1

我发现这个问题与Typescript有关。 resolveLocalFilesystemUrl（）实际上是使用File Entry对象解析的（当我传递一个本地url作为文件路径时），但Typescript认为它是一个Entry对象，并且没有想到可以在其上调用file（）。 / p>

下面通过告诉Typescript entry对象可以是任何类型来解决问题，因此可以在其上调用任何函数或属性。

MediaCapture.captureImage().then((images)=>{
  self.image = images[0].localURL;
  File.resolveLocalFilesystemUrl(self.image).then((entry: any)=>{
    entry.file(function (file) {
      var reader = new FileReader();

      reader.onloadend = function (encodedFile: any) {
        var src = encodedFile.target.result;
        src = src.split("base64,");
        var contentAsBase64EncodedString = src[1];
      };
      reader.readAsDataURL(file);
    })
  }).catch((error)=>{
    console.log(error);
  })
})

请注意，我还必须使用encodedFile: any才能在encodedFile

上调用target.result

Answer 2

我在Ionic3中使用@ionic-native/camera遇到了类似的问题，错误由destinationType: this.camera.DestinationType.FILE_URI给出，我解决了将其更改为destinationType: this.camera.DestinationType.DATA_URL的问题。这是我的项目的样子：

import { Camera, CameraOptions } from '@ionic-native/camera';
import { Image } from '****';

export class CameraService {
  public readonly cameraOptions: CameraOptions = {
    sourceType: this.camera.PictureSourceType.CAMERA,
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    correctOrientation: true
  };

  constructor(public camera: Camera) { }

  public takePicture(): Observable<Image> {
    return Observable.fromPromise(this.camera.getPicture(this.pictureOptions)).map(imageSrc => {
      this.base64Image = 'data:image/jpeg;base64,' + imageSrc;
      return new Image('CameraPhoto.jpeg', this.base64Image);
    });
  }
}

类图像看起来

export class Image {
  public readonly name: string;
  public readonly fileURI: string;
  public readonly file?: File;

  constructor(name: string, fileURI: string, file?: File) {
    this.name = name;
    this.fileURI = fileURI;
    this.file = file;
  }
}

我希望它可以帮助某人。干杯！

Answer 3

这是因为resolveLocalFilesystemUrl是window对象的功能而不是文件。

MediaCapture.captureImage().then((images)=>{
  self.image = images[0].localURL;
  window.resolveLocalFilesystemUrl(self.image).then((entry)=>{
    entry.file(function (file) {
      var reader = new FileReader();

      reader.onloadend = function (encodedFile) {
        var src = encodedFile.target.result;
        src = src.split("base64,");
        var contentAsBase64EncodedString = src[1];
      };
      reader.readAsDataURL(file);
    })
  }).catch((error)=>{
    console.log(error);
  })
})

或者您可以使用相同插件的here

的离子原生版本

无法在Ionic 2项目中使用cordova文件插件读取文件

3 个答案: