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>
View Code

3、配置子窗体

4、在vue界面中 监听以及打开子窗体

 

项目代码下载地址：

https://files.cnblogs.com/files/blogs/702532/testpdf.zip?t=1703141020&download=true

posted @ 2023-12-20 17:57  蓝色精灵jah  阅读(1032)  评论(0)  编辑  收藏  举报