科尔多瓦不支持文件选择器答案

【问题标题】：File Chooser unsupported by cordova科尔多瓦不支持文件选择器
【发布时间】：2020-05-16 11:03:24
【问题描述】：

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

【问题讨论】：

标签： android cordova ionic-framework cordova-plugins

【解决方案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

【讨论】：

完美解决方案！