返回 导航

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）

回到顶部