cordova-plugin-file插件实现js文件操作

Cordova-Plugin-File

• 项目中遇到一个奇怪的需求，需要通过前端界面生成截图然后自保存，全网搜寻很久试过Cordova-Plugin-File-transfer（与本文介绍插件不是同一个）插件，但是该插件只能处理基于服务器上下载的问题，如果要下载自己生成的base64编码格式图片就得转file文件之后才能成功，但是因为js是不允许直接操作文件路径的，所以无法获得转图片后的文件路径，最后选择使用Cordova-Plugin-File插件。由于网络上关于此插件的使用介绍很少，因此自己实现之后决定写一篇详细的文章供大家参考，节约大家的工作时间

首先，有时间的小伙伴可以参考官网：Cordova-Plugin-File—npm

官网的介绍很细，但是对于具体怎么用如何用没有详细的说明和样例参考

• 首先，要使用该cordova插件必须等待cordova准备完毕，因此我们需要先写一个监听函数，等deviceready完成后再调用文件操作方法

 document.addEventListener("deviceready", function(){
	// 此处写需要做的文件操作
},false)

通过样例来了解各参数

• 创建文件夹

window.resolveLocalFileSystemURL(cordova.file.dataDirectory,function(root){	
        
    root.getDirectory('my_folder', {create: true}, function(dirEntry) {
       alert('您创建了：' + dirEntry.name + ' 文件夹。');
     }, function(err){
     	console.log('创建文件夹出错');
     });
       
                 },function(err){});

– window.resolveLocalFileSystemURL为操作方法，此方法是定义在window全局环境中可以直接调用

– 方法的4个参数分别为：

参数1：文件操作目标路径，此处介绍几个常用的，具体可见官网（比如想存储的文件目标路径）

–cordova.file.applicationDirectory - 安装应用程序的只读目录。（iOS，Android，BlackBerry 10，OSX，windows）
– cordova.file.applicationStorageDirectory - 应用程序沙箱的根目录; 在iOS和Windows上，这个位置是只读的（但是特定的子目录[如 /Documents在iOS或/localStateWindows上]是可读写的）。其中包含的所有数据都是应用程序专用的。（iOS，Android，BlackBerry 10，OSX）
– cordova.file.dataDirectory- 使用内部存储器在应用程序的沙箱中进行持久和私有数据存储（在Android上，如果需要使用外部存储器，请使用.externalDataDirectory）。在iOS上，此目录未与iCloud同步（使用.syncedDataDirectory）。（iOS，Android，BlackBerry 10，windows）
–cordova.file.externalRootDirectory - 外部存储（SD卡）根。（Android，BlackBerry 10）

参数2：执行的文件操作

– 创建文件夹

root.getDirectory('newFile', {create: true}, function(dirEntry) {
   alert('您创建了：' + dirEntry.name + ' 文件夹。');
  }, function(err){
   console.log('创建文件夹出错');
});

– 创建文件（此处create参数为如果目标文件夹是否存在该文件，true为不存在则创建，false为不创建）

root.getFile('test.png', {create:true}, function(fileEntry) {
	//成功回调
},function(err){
	//失败回调
});

– 删除文件

root.getFile('test.png',{create:false},function(fs){
		fs.remove(function() {
			console.log('删除成功');
			},function(err){
			console.log('删除失败')
			});
		},function(err){console.log('发生错误');});

这里涉及到的remove、getfile等方法在官网上可查，比较多，所以能实现的功能也比较多
我这边是闯进一个新文件，然后把blob文件对象写入创建的新文件来实现保存图片，供大家参考：

– 参数3：成功回调函数，可以执行各种文件详细操作

–参数4：失败回调函数

个人代码参考

 window.resolveLocalFileSystemURL(cordova.file.dataDirectory,function(root){	
 					// 先查找这个文件，如果没有则创建
                     root.getFile('share.jpeg', { create: true }, function (fileEntry) {
                     // 开始写入文件
                     fileEntry.createWriter(function (fileWriter) {
                     fileWriter.onwriteend = function () {
                     console.log('写入文件成功');
                     // 将fileEntry打印出来可以得到一个包含操作信息的对象
                     _this.resultUrl=fileEntry.nativeURL
                     // 下一行不用管，是个人项目中的调用函数
                     _this.bridgeShare(_this.resultUrl)
                     },
                     // 失败回调
                      fileWriter.onerror = function (err) {
                      console.error('写入文件失败：' + err.toString());
                      }
                      // 以上创建新文件后，开始向文件中写入blob文件对象
                      fileWriter.write(_this.blobData);
                      });
                   }, function(err){console.log('出错');});          
                 },function(err){});