x***@outlook.com
x***@outlook.com
  • 发布:2020-05-22 15:11
  • 更新:2020-05-30 22:51
  • 阅读:2417

WebView input type=file 表单控件无法上传文件(图片)

分类:uni-app

Hi,各位大佬,
下午好,我又遇到了一个新问题,WebView 加载的网页中,有 input type= file 的表单控件,点击上传文件时,没有触发效果,网上搜索了一番,说是WebView 的兼容问题 android webview图片文件上传兼容性问题——上传控件点击无效的解决办法
同时在论坛上看到了其它相同的,无奈没有给出没有解决方案uniapp app端 webview中的页面 无法使用input file来选择文件上传,所以我也发表了一番,望大佬们解答一下,谢谢,同时我也写了一个简单的示例,请查阅一下
运行环境:小米Max2 MIUI11.0.2 Android 7.1.1
开发环境:HBuilder X 2.7.5.20200519

 $(".file").on("change", "input[type='file']", function () {  
            console.log('触发上传!'); // 无法触发上传  
            let filePath = $(this).val();  
            console.log(`文件路径${filePath}`);               
            localStorage.setItem("fileAddress", filePath);  
            let lastname = localStorage.getItem("fileAddress");  
            if (lastname != "") {  
                $(".showFileName").html(lastname);  
            } else {  
                $(".showFileName").html("");  
            }  
        });

完整代码

<body class="body">  
    <div class="text">  
        <div class="text-in"> 文件上传 </div>  
    </div>  
    <div class="head-btn">  
        <form action="" method="post">   
        <a href="javascript:;" class="file">选择文件   
            <input type="file" name="uploadFile" id="uploadFile">  
        </a>   
        </form>  
        <p class="showFileName"></p>  
    </div>  
    <div>   
    <button class="btn" type="button"  data-action="redirectTo">确定</button>   
    <button class="btn1" type="button" data-action="navigateBack">取消上传</button> </div>  
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>  
    <script>  
        $(".file").on("change", "input[type='file']", function () {  
            console.log('触发上传!'); // 无法触发上传  
            let filePath = $(this).val();  
            console.log(`文件路径${filePath}`);               
            localStorage.setItem("fileAddress", filePath);  
            let lastname = localStorage.getItem("fileAddress");  
            if (lastname != "") {  
                $(".showFileName").html(lastname);  
            } else {  
                $(".showFileName").html("");  
            }  
        });  
        $('.btn').click(function (evt) {// 开始上传到服务器  
            var fileUrl;  
            var formdata = new FormData();  
            // 创建一个form类型的数据                  
            formdata.append("files", $("#uploadFile")[0].files[0]);  
            // 获取上传文件的数据                  
            formdata.append("operate", "UpLoadFile");  
            // 操作码                
            formdata.append("name", "name");  
            console.log("begin")  

            console.log("end")  
            var target = evt.target;  
            if (target.tagName === 'BUTTON') {  
                var action = target.getAttribute('data-action');  
                if (action == 'redirectTo') {  
                    uni.redirectTo({  
                        url: '/pages/index/index',  
                        success: function (d) {  
                            console.log("跳转成功");  
                        },  
                        fail: function (e) {  
                            console.log(e);  
                        },  
                    });  
                }  
            }  
        });  
        //取消文件上传              
        $('.btn1').click(function (evt) {  
            var target = evt.target;  
            if (target.tagName === 'BUTTON') {  
                var action = target.getAttribute('data-action');  
                if (action == 'navigateBack') {  
                    uni.navigateBack({  
                        delta: 1,  
                    });  
                }  
            }  
        });  
    </script>
2020-05-22 15:11 负责人:无 分享
已邀请:
x***@outlook.com

x***@outlook.com (作者)

抱歉,我在 document.addEventListener('UniAppJSBridgeReady', () => {}) 回调中 也是无法发起调用的,上传代码时,忘记添加了

x***@outlook.com

x***@outlook.com (作者)

再补充一下,如果通过 plus.webview.create 创建的 webview 是可以实现webview 网页中的input file 控件,打开手机端的文件信息,如果直接使用 webview 组件,则无法监听到 input file 控件的 change 事件,但是如果改写成 plus.webview.create 方式 创建 WebView ,在 nvue 文件中,必须要通过 webview.show() 方法 展现 webview 的网页内容,但是在 扩展名为.vue 则不需要调用show 方法,直接append 到当前Vue 页面中

// .vue 扩展名  
// #ifdef APP-PLUS  
                let wv = plus.webview.create("",webUrl,{  
                    'uni-app': 'none', //不加载uni-app渲染层框架,避免样式冲突  
                    top: 0,  
                    height: '100%',  
                    background: 'transparent'  
                },{  
                    url,  
                    header,  
                    key: name,  
                    ...formData,  
                });  
                wv.loadURL(webUrl)  
                currentWebview.append(wv);  // 直接append 即可  
                               // 但是在 .nvue 中需要调用 wv.show() 方法才能展现  webview  

            // #endif
x***@outlook.com

x***@outlook.com (作者)

该问题目前已经被锁定, 无法添加新回复