IONIC3 - WriteFile & WriteExistingFile 无法覆盖文件

Question

我想为我的Ionic应用程序做图像注释。因此，该应用程序的流程是使用相机插件拍照，并使用FabricJs在图像上绘制，然后保存文件。

当我试图保存或覆盖文件时遇到了障碍。显然是来源"http://localhost:8080/file/data/user/0/***/files/1547183479807.png"文件不更新。

应用程序的流程1) 使用@ionic native/相机拍照2) 将文件复制到本地目录3) 使用this.win.Ionic.WebView.covertFileSrc将文件名转换为"http://localhost:8080/file/data/user/0/***/files/1547183479807.png"4) 推送到另一个页面以访问画布5) 使用链接将背景设置到我的画布(FabricJs)6) 在图像上绘制(手动)7) 通过覆盖现有文件来保存文件，但从现在起什么都不起作用。

我试着-用writeFile&writeExisitingFile，不起作用。-removeFile和writeFile，但不起作用。-尝试转换为ArrayBuffer而不是Blob，但不起作用-尝试创建另一个新文件，但也不起作用(似乎在我推到新页面后，所有文件功能都不会影响文件)-尝试使用本地cordova，但也不起作用。-删除相同的文件两次，(第一次我没有收到错误，但第二次我收到错误，说"文件不存在"，但当我查看源文件时，文件也在那里，并出现在我的应用程序缩略图中。

private copyFileToLocalDir(namePath, currentName, newFileName,id,index) {
this.file.copyFile(namePath, currentName, this.file.dataDirectory, newFileName).then(success => {
const keys = id.split('-');
let filename = this.file.dataDirectory + newFileName;
this.fp = this.win.Ionic.WebView.convertFileSrc(filename) ;
this.navCtrl.push(AnnotationsPage, {
filepath: this.fp,
filename: newFileName
});
this.presentToast("Image Successfully Added",'middle');
}, error => {
this.presentToast('Error while storing file.','middle');
});
} 

注释.ts

savePicture() {
let image = this.canvas.toDataURL({
format: 'png'
});
this.saveBase64(image);
}
public saveBase64(base64:string):Promise<string>{
return new Promise((resolve, reject)=>{
var realData = base64.split(",")[1]
let blob=this.b64toBlob(realData,"image/png")
this.file.writeFile(this.file.dataDirectory,this.filename,blob,{replace:true})
// this.file.writeExistingFile(this.file.dataDirectory,this.filename, blob)
.then((val)=>{
console.log('Write Info',val)
let fp = this.win.Ionic.WebView.convertFileSrc(this.file.dataDirectory+this.filename) ;
})
.catch((err)=>{
console.log('error writing blob')
console.log(err);
// reject(err)
})
})
}
b64toBlob(b64Data, contentType) {
contentType = contentType || '';
var sliceSize = 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}

我检查了base64文件，它运行良好(将数据扔到在线转换器，它就会显示图片。

在函数"copyFileToLocalDir"之后，我似乎无法修改本地目录中存储的文件。

提前谢谢。请随意问我更多的问题。7小时没有结果。

我正在更新测试。执行了File.readAsDataUrl和预期的文件file:///data/user/0/*/files/154723194843.png已从旧图像更新为已编辑的新图像。(在一些在线转换器上测试了base64)，但它仍然不能反映源代码http://localhost:8080/file/data/user/0/***/files/154723194843.png

Answer 1

感谢所有通读的人。

经过大量测试，我发现Ionic Webview的文件不会更新，除非你再次调用它们(有点像缓存，显然没有办法重置或刷新缓存)。

因此，在我的情况下，我需要从网络视图中删除图像并再次调用它，然后它将再次返回检索或创建另一个具有另一个文件名的文件并显示它。