ionic7+capacitor+vue打开文件管理器

玉言920

已于 2023-06-08 14:33:00 修改

阅读量594

点赞数

文章标签： vue.js javascript web app html5

于 2023-06-08 13:58:41 首次发布

本文链接：https://blog.csdn.net/qq_26354857/article/details/131106088

版权

文章介绍了在Capacitor项目中如何实现打开系统文件管理器的功能。由于Capacitor自身不提供此功能，作者提出了两个解决方案：一是使用Cordova的file-chooser插件（仅支持Android），二是直接使用HTML的<inputtype=file>标签。这两个方法分别进行了详细的操作步骤说明。

摘要由CSDN通过智能技术生成

capacitor的filesystem里只有文件和文件夹处理的功能，笔者在capacitor社区翻了很久都没有找到一个能打开app系统文件管理器的方法。capacitor没有原生的打开文件管理器的插件，
解决方案：
方案一：借用cordover中的filechooser插件（只支持安卓系统）
原API地址：https://ionicframework.com/docs/v3/native/file-chooser/
安装：

npm i cordova-plugin-filechooser
npm install --save @ionic-native/file-chooser

vue中引用：

import { FileChooser,FileChooserOptions } from '@ionic-native/file-chooser';

components中声明组件：

components: {
   FileChooserOptions ，
    FileChooser
  },

方法中调用,此处open方法中可以传入文件过滤器FileChooserOptions 的实例对象：

FileChooser.open()
     .then(uri=>{
       console.log(uri);
       //返回文件的uri
       alert(uri);
     })
     .catch(e => {
       console.log(e)
       alert(e);
     });

效果：
在这里插入图片描述

方案二：
简单粗暴的直接用原生标签，支持安卓系统，不知道是否支持ios，有兴趣的可以自己试一下

            <input type="file" id="myFile" οnchange="handleFiles(this.files)">
            <div id="filecontent"></div>

脚本

 handleFiles(files)  
    {  
      if(files.length)  
      {  
        var file = files[0];  
        var reader = new FileReader();  
        reader.readAsText(file);  
      }  
    }