问Capacitor API -无法使用Filesystem.writeFile在设备上写入文件
EN

Stack Overflow用户

提问于 2020-07-06 12:57:47

回答 4查看 6.9K关注 0票数 0

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

下面是我的代码：

  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);
  }

执行这段代码，我没有得到任何错误，并且我的控制台打印保存的文件的路径：

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

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

我的Blob很好(我可以在浏览器中可视化它)，并且dataUrl转换已经正确完成。

因此，来自Capacitor FileSystem API的writeFile函数似乎无法将文件保存到设备上。

有人知道这是为什么吗?我该如何解决这个问题？我真的被困住了，目前还不能实现这个功能。

下面是我的依赖项和插件：

  "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": {}
    }
  }

ionic-framework

capacitor

腾讯云域名特惠，新用户首年1元起

腾讯云域名专场特惠：个人新用户.cn仅8.8元/年，企业新用户.com仅1.06元/年...

回答 4

Stack Overflow用户

发布于 2020-08-28 12:48:33

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

而不是：

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

尝试：

const { Filesystem } = Plugins;

票数 5

Stack Overflow用户

发布于 2020-07-06 13:35:23

文件系统访问很棘手，因为每个系统(安卓、iOS等)都有自己的own rules

Android允许你描述的行为，但是你需要使用FilesystemDirectory.Documents而不是FilesystemDirectory.Data作为目录来写入文件。点击此处查看更多信息：https://capacitorjs.com/docs/apis/filesystem (滚动到FilesystemDirectory枚举)

iOS不允许直接访问文件，您可以尝试使用icloud文件夹路由来实现您想要的内容。请看这个答案：Save file to public directory using Cordova FileTransfer

但由于你的用例是允许类似“下载”的行为--试着看看这个库是否能为你做这个：https://github.com/eligrey/FileSaver.js/它是web而不是原生API，但在现代浏览器中工作得很好。

票数 0

Stack Overflow用户

发布于 2020-11-04 15:48:07

你好，先生，我有同样的问题，先生，我想在我的代码中实现这一点。先生，我能看一下这个的完整代码吗？

let reader = this.getFileReader();
reader.onloadend = readerEvent => {
  if (reader.error) {
     console.error(reader.error);
  } else {
     let base64data: any = readerEvent.target['result'];
     let mimeType = base64data.substring(base64data.indexOf(":")+1, base64data.indexOf(";"));
     let options: IWriteOptions = { replace: true };
     this.file.writeFile(this.file.dataDirectory, fileName, blob, options).then(res => {
        this.fileOpener.open(this.file.dataDirectory + fileName, mimeType);
     });
  }
};
reader.readAsDataURL(res.body);