File Chooser не поддерживается Cordova - PullRequest
Новая
       70

File Chooser не поддерживается Cordova

0 голосов
/ 30 января 2020

Я ищу плагин выбора файлов для моего приложения ioni c 5, но FileChooser теперь не поддерживается cordova. Есть ли другие плагины, которые я могу использовать. Спасибо!

1 Ответ

1 голос
/ 31 января 2020

Соответствует ли вам веб-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)
    };
  };

}

Это будет использовать стандартный веб-API (входной файл), и в последнее время все современные браузеры / устройства поддерживают этот подход.

Определенно зависит от вашего варианта использования и для некоторых он не будет работать.

Демо: https://stackblitz.com/edit/ionic-4-angular-8-start-template-ywc4r8

...