Как сохранить загруженный файл с помощью Capacitor в Ionic4 Angular? - PullRequest
Новая
       44

Как сохранить загруженный файл с помощью Capacitor в Ionic4 Angular?

0 голосов
/ 18 июня 2019

Я недавно опубликовал свое приложение Ionic 4 Angular как в виде веб-приложения, так и в качестве собственного приложения для Android.
В родном приложении для Android все работает нормально, кроме сохранения загруженного файла.

Чтобы загрузить и сохранить файл, я всегда использовал пакет file-saver npm следующим образом (это общая службакоторый я вызываю каждый раз, когда мне нужно что-то загрузить, из PDF-файла в изображение и т. д.): 

import { saveAs } from 'file-saver';

// ...

saveGenericFile(api: string, fileinfos: any, idFile: string): any {
    let mediaType = 'application/pdf';
    let fileName = '';

    if (fileinfos != null) {
      mediaType = fileinfos.contentType;
      fileName = fileinfos.fileName;
    }

    const headers = this.base.commonHeader;
    const url = this.baseUrl + api + '?id=' + idFile;
    this.http.post(url, null, { headers, responseType: 'blob' }).subscribe(
      (response) => {
        // tslint:disable-next-line: prefer-const
        let blob = new Blob([response], { type: mediaType });
        saveAs(blob, fileName);
      }, e => {
        console.error(e);
        this.toastsvc.generateToast('ERROR! An error occurred while saving this File, try later or contact support', 'danger');
      }, () => {
        /* do nothing */
      }
    );
  }

Как я уже говорил выше, этот фрагмент кода работает отлично, но только когда мне нужносохранить что-нибудь из веб-релиза.

Единственные онлайн-примеры, которые мне удалось найти, были все о Cordova и / или предыдущих / устаревших версиях.
О конденсаторе, я только что нашел эту документацию и из этого я только что нашел этот фрагмент кода: 

import { Plugins, FilesystemDirectory, FilesystemEncoding } from '@capacitor/core';

const { Filesystem } = Plugins;

fileWrite() {
  try {
    Filesystem.writeFile({
      path: 'secrets/text.txt',
      data: "This is a test",
      directory: FilesystemDirectory.Documents,
      encoding: FilesystemEncoding.UTF8
    });
  } catch(e) {
    console.error('Unable to write file', e);
  }
}

Но проблема в том, что моя функция выше возвращает BLOB-объект и этотпринимайте только строку для данных.

Итак, есть какая-нибудь эквивалентная функция конденсатора, которую я могу использовать для загрузки (и сохранения) BLOB-файлов как при работе в качестве веб-приложения, так и при работе в качестве Androidродное приложение?

ОБНОВЛЕНИЕ

Я также попробовал следующее, но оно не работает: 

saveGenericFile(api: string, fileinfos: any, gidFile: string): any {
    let mediaType = 'application/pdf';
    let fileName = '';

    if (fileinfos != null) {
      mediaType = fileinfos.contentType;
      fileName = fileinfos.fileName;
    }

    const headers = this.base.commonHeader;
    const url = this.baseUrl + api + '?id=' + gidFile;
    this.http.post(url, null, { headers, responseType: 'blob' }).subscribe(
      (response) => {
        if (!this.useCordovaDl) {
          // tslint:disable-next-line: prefer-const
          let blob = new Blob([response], { type: mediaType });
          saveAs(blob, fileName);
        } else {
          this.blobFileWrite(fileName, response);
        }
      }, e => {
        console.error(e);
        this.toastsvc.generateToast('ERROR! An error occurred while saving this File, try later or contact support', 'danger');
      }, () => {
        /* do nothing */
      }
    );
  }

  blobFileWrite(filename: string, blobfile: Blob) {
    const reader = new FileReader();

    // This fires after the blob has been read/loaded.
    reader.addEventListener('loadend', (e: any) => {
      const text = e.srcElement.result;
      this.fileWrite(filename, text);
    });

    // Start reading the blob as text.
    reader.readAsText(blobfile);
  }

  fileWrite(filename: string, filedata: string) {
    try {
      Filesystem.writeFile({
        path: filename,
        data: filedata
        // ,
        // directory: FilesystemDirectory.Documents,
        // encoding: FilesystemEncoding.UTF8
      });
    } catch (e) {
      console.error('Unable to write file', e);
    }
  }

ОБНОВЛЕНИЕ # 2

Похоже, на GitHub все еще остается проблема сохранения данных BLOB-объектов с помощью конденсатора.Тем временем я буду искать решение Cordova.Или я просто отключу каждую кнопку загрузки, если платформа Android или IOS.
Я опубликую здесь все рабочие решения Cordova, если смогу найти один

1 Ответ

1 голос
/ 03 июля 2019

Вы можете создать плагин, которому вы можете передать URL, и он будет загружен изначально. Как вы уже обнаружили, передача BLOB / файла пока невозможна.

Если плагин недоступен или вы не хотите его создавать. Вы можете вызвать встроенную функцию из js, которую вы можете прослушивать на стороне native для URL и т. Д.

...