uniapp app安卓、ios文件选择 (上传pdf word video img )等
1、hybrid 必须放在项目根目录下,不然会调用失效:如图
2、建立nvue 子窗体
代码:

1 <template> 2 <view class="nvue"> 3 <text class="popup-item" @click="clickfun">选择文件</text> 4 <text class="ddddd popup-item popup-item2" @click="close"> 5 取消 6 </text> 7 <!-- @message="msg" --> 8 <!-- web-view 必须使用nvue --> 9 <web-view ref="webview" @onPostMessage="message" @message="tt" style="height: 0px;width: 0px;" src="/hybrid/html/index.html" 10 :fullscreen='false'></web-view> 11 </view> 12 </template> 13 14 <script> 15 export default { 16 data() { 17 return {} 18 }, 19 methods: { 20 clickfun() { 21 this.$refs.webview.evalJs("document.getElementById('upfile').click()"); 22 }, 23 message(e) { 24 // base 64 25 this.img = e.detail.data[0].action; 26 // this.$emit('Onchange', e.detail.data[0].action); 27 uni.$emit('popup-page', { // 向父界面传值 (test.vue界面) 28 data:e.detail.data[0] 29 }) 30 }, 31 // msg(e) { 32 // console.log("", e) 33 // // this.$emit('Onchange', e.detail.data[0].action) 34 // }, 35 // 关闭子窗体 36 close() { 37 const subNVue = uni.getCurrentSubNVue(); 38 subNVue.hide('fade-out', 200); 39 } 40 } 41 } 42 </script> 43 44 <style> 45 .nvue { 46 /* background: #F6F6F6; */ 47 } 48 49 .popup-item { 50 text-align: center; 51 padding: 41rpx 0; 52 color: #0A1629; 53 border-bottom: 2rpx solid #EEEFF2; 54 background: #F6F6F6; 55 56 } 57 58 .popup-item2 { 59 border-top: 16rpx solid #F6F6F6; 60 border-bottom: 0; 61 background: #F6F6F6; 62 } 63 </style>
3、配置子窗体
4、在vue界面中 监听以及打开子窗体
项目代码下载地址:
https://files.cnblogs.com/files/blogs/702532/testpdf.zip?t=1703141020&download=true
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库