无法在Ionic 2项目中使用cordova文件插件读取文件 [英] Cannot read a file using cordova file plugin in an Ionic 2 project

问题描述

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

I'm trying to use the Cordova file plugin to read an image saved in a mobile device so I can then get the base64 encoding of it, which I need to store remotely. The problem is that the resolveLocalFilesystemUrl() method, which is supposed to provide a File Entry object, instead seems to be returning an Entry object, which means I can't call file on it.

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

Here is the code that should be getting the File Entry object so I can use the file method to read the file itself.

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

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

I am getting the following Typescript error, which tells me resolveLocalFilesystemUrl() is resolving with an Entry object, which doesn't have a file method. (The plugin documentation says resolveLocalFilesystemUrl resolves with a File Entry object, and such an object definitely has a file method which provides the file itself):

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

我已经尝试了我提供resolveLocalFilesystemUrl（）的路径类型。我尝试了沿着/ var / mobile / Applications // Documents / path / to / file和本地URL的完整路径，沿着cdvfile：// localhost / temporary / filename的行 - 都不起作用

I have experimented with the type of path I am providing resolveLocalFilesystemUrl(). I have tried full paths along the lines of /var/mobile/Applications//Documents/path/to/file and local URLs along the lines of cdvfile://localhost/temporary/filename - neither works

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

So the specific quesiton is why won't resolveLocalFilesystemUrl() provide me a File Entry object, or how I get it to do so? More generally, how can I read a file in Ionic 2 so that I can get a base64 version of it, if the above approach won't work.

谢谢！

推荐答案

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

I discovered that this problem was related to Typescript. resolveLocalFilesystemUrl() was actually resolving with a File Entry object (when I passed it a local url as the file path), but Typescript thought it was an Entry object and didn't think file() could be called on it.

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

The below fixed the issue by telling Typescript that entry object could be of any type, so could have any function or property called on it.

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

Note that I also had to use encodedFile: any in order to allow target.result to be called on encodedFile

这篇关于无法在Ionic 2项目中使用cordova文件插件读取文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！