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

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);  
      }  
    } 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值