Ionic 2 文件插件使用示例

Posted 2023-03-13

【中文标题】Ionic 2 文件插件使用示例

【英文标题】：Ionic 2 File Plugin usage examples

【发布时间】：2016-11-11 13:52:55

【问题描述】：

有没有人有关于如何在 Ionic 2/Angular 2 项目中使用 Cordova Native File Plugin 的完整示例？

我安装了这个插件，但文档对我来说似乎没有多大意义，因为它是零散的并且缺乏完整的示例，包括所有需要的导入。

例如，下面的示例没有显示 LocalFileSystem 或 window 等对象的来源。

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) 

    console.log('file system open: ' + fs.name);
    fs.root.getFile("newPersistentFile.txt",  create: true, exclusive: false , function (fileEntry) 

        console.log("fileEntry is file?" + fileEntry.isFile.toString());
        // fileEntry.name == 'someFile.txt'
        // fileEntry.fullPath == '/someFile.txt'
        writeFile(fileEntry, null);

    , onErrorCreateFile);

, onErrorLoadFs);

例如，我需要创建一个属性文件。首先，我需要检查应用程序沙箱存储区域中是否存在文件，如果不存在，我必须创建它。然后我必须打开文件写入数据并保存。我怎么能这样做？

【问题讨论】：

您能更具体地说明您要完成的工作吗？

例如，我需要创建一个属性文件。首先，我需要检查应用程序沙箱存储区域中是否存在文件，如果不存在，我必须创建它。然后我必须打开文件写入数据并保存。

forum.ionicframework.com/t/…

【参考方案1】：

这是一个将 IonicNative 用于我正在开发的应用程序的示例 发送带有 csv 文件附件的电子邮件。

import EmailComposer from '@ionic-native/email-composer';
import File from '@ionic-native/file';

class MyComponent 
 constructor(private emailComposer: EmailComposer, private file: File) 

 
 testEmail() 
 this.file.writeFile(this.file.dataDirectory, 'test.csv', 'hello,world,', replace: true)
     .then(() =>       
       let email = 
         to: 'email@email',
         attachments: [
           this.file.dataDirectory + 'test.csv'
         ],

         subject: 'subject',
         body: 'body text...',
         ishtml: true
       ;
       this.emailComposer.open(email);

     )
     .catch((err) => 
       console.error(err);
     );

 

这是在 ios 上使用 ionic 3.7.0 测试的。

【讨论】：

当我使用 dataDirectory 时它对我不起作用，但当我使用 externalDirectory 时它起作用

@Amr.Ayoub API 中可能发生了一些变化。感谢您的评论。

这行得通。但前提是您从根目录写入/读取文件。我的情况是我无法创建任何文件夹。在最坏的情况下，我想创建一条深路径。但是怎么做？文档中的示例不起作用。

@PhilipBrack 有没有办法在this.file.applicationDirectory 中写入文件？

我在 Windows 10 uwp 应用程序中尝试了相同的方法，电子邮件以正文和主题打开，但附件不起作用，知道吗？

【参考方案2】：

Ionic 2 带有一个 Cordova 文件插件包装器： http://ionicframework.com/docs/v2/native/file/.

您可以在原始插件的文档中找到必要的文件系统路径（例如cordova.file.applicationDirectory）： https://github.com/apache/cordova-plugin-file#where-to-store-files。请注意，并非所有平台都支持相同的存储路径。

我什至设法用它构建了一个文件浏览器。像这样使用它：

import Component from '@angular/core';
import File from 'ionic-native';

...

File.listDir(cordova.file.applicationDirectory, 'mySubFolder/mySubSubFolder').then(
  (files) => 
    // do something
  
).catch(
  (err) => 
    // do something
  
);

【讨论】：

感谢您的回复！那是我的疑问之一。这个科尔多瓦对象是从哪里来的？

编译器会给你一条消息，但你的设备上使用 Ionic 可以使用 cordova 对象。

不幸的是，我得到一个空白屏幕和控制台中的错误消息。消息说：TypeScript 错误：E:/Ionic2/ionic2-app/app/providers/file-provider/file-provider.ts(22,18): Error TS2304: Cannot find name 'cordova'。

很遗憾，您无法在浏览器中对此进行测试，它必须在设备/模拟器上。您也可以在导入后使用declare var cordova: any 来安抚编译器。

如何写入文件？我没有找到任何方法来做到这一点。