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

问题描述

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

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

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

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 行的完整路径和沿 cdvfile://localhost/temporary/filename 行的本地 URL - 都不起作用

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 entry 对象可以是任何类型来解决问题，因此可以调用任何函数或属性.

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

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

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