Capacitor API -无法使用Filesystem.writeFile在设备上写入文件
我正在开发一个使用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": {}
}
}回答 4
Stack Overflow用户
发布于 2020-08-28 20:48:33
console.log方法的输出实际上可以给出文件系统错误导入的提示。
而不是：
import { Filesystem } from '@capacitor/core';尝试：
const { Filesystem } = Plugins;Stack Overflow用户
发布于 2020-07-06 21: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，但在现代浏览器中工作得很好。
Stack Overflow用户
发布于 2020-11-04 23: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);特别是这一个let reader = this.getFileReader();和您使用的导入包，谢谢
https://stackoverflow.com/questions/62756611
复制相似问题
腾讯云开发者
