返回 导航

Cordova

hangge.com

Cordova - 使用filepath插件将文件content://路径转换成file://路径

作者:hangge | 2022-05-19 08:27
    我在之前文章中介绍了如何使用 multiple documents picker 插件来调用系统自带文件管理器进行文件选择(点击查看)。但是如果 Android 版本 >= 4.4,由于引入了 MediaStore,文件管理器选择文件后返回的是 content://xxx 这种格式的内容路径:

    但有时我们需要的是 file://xxxx 这样的文件路径,比如:调用 file 插件读取文件内容,就必须使用使用这种以 file:// 开头的绝对文件路径。这种情况我们便可借助本文介绍的 filepath 插件通过 content 路径获取对应的 file 路径,下面通过样例进行演示。

1,添加插件

我们要在“终端”中进入工程所在的目录,然后运行如下命令安装插件:
cordova plugin add cordova-plugin-filepath

2,使用样例

(1)下面样例代码,点击页面上的“读取文件”按钮后,会先使用 multiple documents picker 插件选择文件,然后通过 filepath 获取以 file:// 开头的绝对文件路径,最后在使用 file 插件读取文件内容并显示在页面上。
关于 multiple documents picker 插件与 file 插件更详细的用法,可以查看我之前的文章:
<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>Hello World</title> 
  <script src="cordova.js"></script>
  <script>
      // 选择文件
      function selectFile() {
        //2表示选择所有文件,1表示只选择图片
        multipleDocumentsPicker.pick(2, function(files) {
          let fileArray = JSON.parse(files);
          if(fileArray.length > 0) {
            document.getElementById("result").innerHTML = "文件选择完毕!路径为:"+fileArray[0].uri;
            getFilePath(fileArray[0].uri);
          }        
        }, function(error) {
          document.getElementById("result").innerHTML = "文件选择失败:"+ error;
        });
      }
      
      // 获取file://路径
      function getFilePath(contentPath) {
        document.getElementById("result").innerHTML += contentPath;
        // 通过content:// 路径获取对应的 file://路径
        window.FilePath.resolveNativePath(contentPath, function(finalPath) {
          document.getElementById("result").innerHTML += "<br><br>对应的文件路径为:"+finalPath;
          // 获取对应的 fileEntry 并读取文件
          window.resolveLocalFileSystemURL(finalPath, readFile, console.log);
        }, function(error) {
          console.log(error);
        });
      }
      
      //读取文件
      function readFile(fileEntry) {
          fileEntry.file(function (file) {
              var reader = new FileReader();
              reader.onloadend = function() {
                  document.getElementById("result").innerHTML += "<br><br>文件内容为:"+this.result;
              };
              reader.readAsText(file);
          }, function() {
              document.getElementById("result").innerHTML += "文件读取失败!";
          });
      }
      
  </script> 
 </head> 
 <body>
  <button style="font-size:23px;" onclick="selectFile()">读取文件</button>
  <div id="result" style="word-break: break-all;"></div>
 </body>
</html>

(2)效果图如下:
         
评论

全部评论(0)

回到顶部