介绍ionic 4中的fileChooser

概述

在开发移动应用程序时，经常需要让用户选择他们设备中的文件。这时，可以使用ionic 4中的fileChooser插件。fileChooser插件允许用户从设备中选择文件，并返回文件的路径作为结果。

安装

要使用fileChooser插件，只需要使用以下命令在ionic 4应用程序中安装它：

ionic cordova plugin add cordova-plugin-filechooser
npm install @ionic-native/file-chooser

此外，还需要将插件添加到应用程序的NgModule中：

import { FileChooser } from '@ionic-native/file-chooser/ngx';

@NgModule({
  ...
  providers: [
    ...
    FileChooser,
    ...
  ],
  ...
})
export class AppModule { }

使用

在需要使用fileChooser插件的组件中，首先要将它注入为一个依赖项：

import { FileChooser } from '@ionic-native/file-chooser/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private fileChooser: FileChooser) { }

}

然后，您可以使用fileChooser插件提供的open()方法来打开文件选择器：

this.fileChooser.open()
  .then(uri => console.log(uri))
  .catch(err => console.log(err));

open()方法返回一个Promise对象。如果用户选择了一个文件，Promise对象将带有选定文件的绝对路径。否则，Promise对象将被拒绝（rejected）并返回一个错误。

示例

以下是一个使用fileChooser插件的示例。该示例在用户选择文件时，将所选文件的路径显示在视图中：

import { Component } from '@angular/core';
import { FileChooser } from '@ionic-native/file-chooser/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  selectedFilePath: string;

  constructor(private fileChooser: FileChooser) { }

  openFileChooser() {
    this.fileChooser.open()
      .then(uri => this.selectedFilePath = uri)
      .catch(err => console.log(err));
  }

}

在上面的示例中，当用户点击HTML视图中的一个按钮时，会调用名为openFileChooser()的方法。该方法使用fileChooser插件打开文件选择器，用户选择文件后，将文件路径保存在名为selectedFilePath的变量中。

然后，将所选文件路径在视图中显示：

<ion-header>
  <ion-toolbar>
    <ion-title>
      File Chooser Example
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-button (click)="openFileChooser()">
    Choose File
  </ion-button>

  <div *ngIf="selectedFilePath">
    Selected file: {{ selectedFilePath }}
  </div>
</ion-content>

结论

fileChooser插件使移动应用程序开发人员能够轻松让用户选择他们设备上的文件。使用fileChooser插件的open()方法，可以打开文件选择器并返回所选文件的路径作为结果。通过该插件，可以让您的应用程序更加灵活、功能更加强大。