电容器FileSystem API-无法使用Filesystem.writeFile在设备上写入文件 [英] Capacitor FileSystem API - Unable to write a file on device using Filesystem.writeFile

问题描述

我正在使用Angular 9/Ionic 5/Capacitor 2.0开发混合应用程序.我正在尝试将来自我的API的文件(基本上是PDF或图像文件)作为Blob保存到移动设备(IOS/Android)的文件系统中.我的最终目标是重现该文件的类似浏览器的下载功能(允许用户将其保留在手机上).

I'm working on a Hybrid app using Angular 9 / Ionic 5 / Capacitor 2.0. I'm trying to save a file (basically PDF or image file) coming from my API as a Blob to the file system of my mobile devices (IOS/Android). My final goal is to reproduce a Browser-like download feature of the file (allowing the user to keep it on his phone).

这是我的代码:

  downloadNativeFile(blob: Blob, fileName: string){
    let reader = this.getFileReader();
    reader.onloadend = (readerEvent) => {
      if(reader.error){
        console.log(reader.error);
      } else {
        let base64data: any = readerEvent.target['result'];
        try {
          Filesystem.writeFile({
            path: fileName,
            data: base64data,
            directory: FilesystemDirectory.Data
          }).then((res)=>{
            Filesystem.getUri({
              directory: FilesystemDirectory.Data,
              path: fileName
            }).then((getUriResult) => {
              const path = getUriResult.uri;
              console.log("The file's path : " + path);
              console.log(Capacitor.convertFileSrc(getUriResult.uri));              
            }, (error) => {
              console.log(error);
            });
          }).catch((err)=>{
            console.log("Error", err);
          });
        } catch(e) {
          console.error('Unable to write file', e);
        }
      }
    }

    reader.readAsDataURL(blob);
  }

执行此代码，我没有收到任何错误，我的控制台显示了已保存文件的路径:

Executing this code I don't get any error and my console prints the path of the saved file :

The file's path : /DATA/sample.pdf
http://localhost/_capacitor_file_/DATA/sample.pdf

尽管如此，我在设备上找不到任何新文件(我也尝试了FilesystemDirectory枚举中的所有值).在Android(7& 10)和IOS(13)上进行了测试.

Nevertheless, I can't found any new file on my device (I also tried all values from the FilesystemDirectory enum). Tested on both Android (7 & 10) and IOS (13).

我的Blob很好(我可以在浏览器中对其进行虚拟化)，并且dataUrl转换已正确完成.

My Blob is good (I can vizualize it in browser) and the dataUrl conversion is properly done.

因此，似乎Capacitor FileSystem API中的writeFile函数静默地无法将文件保存在设备上.

So it seems that the writeFile function from the Capacitor FileSystem API is silently failing to save the file on the device.

有人知道为什么吗，我该如何解决?我实在被困住了，目前无法实现此功能.

Does anyone know why and how can I fix this ? I'm literally stucked and can't implement this feature at the moment.

这是我的依赖项和插件:

Here are my dependencies and plugins :

  "dependencies": {
    "@angular/animations": "^9.1.7",
    "@angular/cdk": "^9.2.3",
    "@angular/common": "^9.1.7",
    "@angular/compiler": "^9.1.7",
    "@angular/core": "^9.1.7",
    "@angular/fire": "^5.4.2",
    "@angular/forms": "^9.1.7",
    "@angular/material": "^9.2.3",
    "@angular/material-moment-adapter": "^9.2.4",
    "@angular/platform-browser": "^9.1.7",
    "@angular/platform-browser-dynamic": "^9.1.7",
    "@angular/platform-server": "^9.1.7",
    "@angular/router": "^9.1.7",
    "@angular/service-worker": "^9.1.7",
    "@auth0/angular-jwt": "^2.1.0",
    "@capacitor/android": "^2.1.0",
    "@capacitor/core": "2.1.0",
    "@capacitor/ios": "^2.1.0",
    "@ionic-native/core": "^5.25.0",
    "@ionic-native/fcm": "^5.26.0",
    "@ionic-native/http": "^5.26.0",
    "@ionic-native/splash-screen": "^5.25.0",
    "@ionic-native/status-bar": "^5.25.0",
    "@ionic/angular": "^5.1.1",
    "@ngrx/effects": "^9.1.2",
    "@ngrx/entity": "^9.1.2",
    "@ngrx/store": "^9.1.2",
    "@ngrx/store-devtools": "^9.1.2",
    "ajv": "^6.9.1",
    "angular2-text-mask": "^9.0.0",
    "animate.css": "^3.7.0",
    "bootstrap-sass": "^3.4.0",
    "capacitor-fcm": "^2.0.0",
    "classlist.js": "^1.1.20150312",
    "cordova-plugin-advanced-http": "^2.4.1",
    "cordova-plugin-file": "^6.0.2",
    "core-js": "^2.6.4",
    "fibers": "^4.0.3",
    "file-saver": "^2.0.2",
    "firebase": "^5.8.2",
    "font-awesome": "^4.7.0",
    "html-webpack-plugin": "^2.21.0",
    "jetifier": "^1.6.6",
    "lottie-web": "^5.4.3",
    "moment": "^2.24.0",
    "ngx-markdown": "^9.0.0",
    "pwa": "^1.9.6",
    "rxjs": "^6.5.5",
    "scrolling-element": "^1.0.2",
    "tslib": "^1.10.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {/**/},
  "cordova": {
    "plugins": {
      "cordova-plugin-advanced-http": {}
    }
  }

推荐答案

console.log方法的输出实际上可以提示文件系统导入错误.

The output of console.log method can actually give a hint about wrong import of Filesystem.

代替:

import { Filesystem } from '@capacitor/core';

尝试:

const { Filesystem } = Plugins;

这篇关于电容器FileSystem API-无法使用Filesystem.writeFile在设备上写入文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！