Cordova不支持的文件选择器

Question

我正在为Ionic 5应用程序寻找文件选择器插件，但Cordova现在不支持FileChooser。还有其他我可以使用的插件。谢谢！

Answer 1

Web API是否适合您的需求，而不是基于Cordova的方法？

如今它得到了不错的支持：https://caniuse.com/#search=FileReader

您可以这样操作：

<ion-header>
  <ion-toolbar>
    <ion-title>
      My super tabs app
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-card class="welcome-card">
      <img [src]="imageUrl">
    </ion-card>
    <ion-button expand="full">
      <ion-icon slot="start" name="image"></ion-icon>
      <ion-label for="file-input">Choose file to upload</ion-label>
      <input style="position: absolute; opacity: 0; width: 100%; height: 100%" type="file" (change)="loadImageFromDevice($event)" id="file-input" accept="image/png, image/jpeg">
    </ion-button>
</ion-content>

您的ts：

import { Component } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

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

  imageUrl: SafeResourceUrl;
  dataUrl: string | ArrayBuffer;

  constructor(private domSanitizer: DomSanitizer) {}

  loadImageFromDevice = (event) => {
    if (!event.target.files[0]) return;
    const file = event.target.files[0];
    if (!file.type.match('image')) return;
    // do blob:
    let blobReader = new FileReader();
    blobReader.readAsArrayBuffer(file);
    blobReader.onload = () => {
      let blob: Blob = new Blob([new Uint8Array((blobReader.result as ArrayBuffer))]);
      this.imageUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(blob));
    };
    // do base64data:
    /* let dataReader = new FileReader();
    dataReader.readAsDataURL(file);
    dataReader.onload = () => {
      this.dataUrl = dataReader.result;
    };
    dataReader.onerror = (error) => {
      console.log(error)
    }; */
    // handle errors:
    blobReader.onerror = (error) => {
      console.log(error)
    };
  };

}

这将利用标准的Web API（输入文件），并且最近所有现代浏览器/装置都支持此方法。

绝对取决于您的用例，在某些情况下将无法使用。

演示：https://stackblitz.com/edit/ionic-4-angular-8-start-template-ywc4r8