使文件输入字段在Android nativescript vue webview上工作

Posted 2023-04-13

【中文标题】使文件输入字段在Android nativescript vue webview上工作

【英文标题】：Making file input filed work on Android nativescript vue webview

【发布时间】：2020-01-30 05:00:47

【问题描述】：

Playground 上的 VUE 完整解决方案。

---

我正在使用 NativeScript Vue 创建一个应用程序，并且我使用 webview 作为主要组件。在加载的网站中有一个文件输入字段来捕获相机输入。

它在 ios 设备上运行良好，但在 android 上，输入字段不起作用。

有没有人知道使文件输入字段在 Android webview 上工作的解决方案？

我使用 tns-android 版本：6.1.1

更新 1

我使用的是哪个平台？

安卓 10.0 模拟器。像素 3a

有关堆栈的更多信息：

CLI：6.1.2 nodejs: v10.16.0 tns-core-modules: tns-core-modules@6.1.1

运行时：

"tns-android": “版本”：“6.1.1” , “tns-ios”： “版本”：“6.1.0”

插件：

“依赖”：

"@nota/nativescript-webview-ext": "^5.4.1",

"@nstudio/nativescript-camera-plus": "^2.2.6",

"axios": "^0.19.0",

"js-cookie": "^2.2.1",

"nativescript-camera": "^4.5.0",

"nativescript-geolocation": "^5.1.0",

"nativescript-plugin-firebase": "^9.1.1",

"nativescript-theme-core": "^1.0.6",

"nativescript-ui-sidedrawer": "^7.0.2",

"nativescript-vue": "~2.4.0",

"net": "^1.0.2",

"rxjs": "^6.5.3",

"tns-core-modules": "~6.1.0",

"vuex": "^3.1.1"

,

“devDependencies”：

"@babel/core": "~7.1.0",

"@babel/preset-env": "~7.1.0",

"babel-loader": "~8.0.0",

"nativescript-dev-webpack": "~1.2.0",

"nativescript-vue-template-compiler": "~2.4.0",

"node-sass": "^4.7.1",

"vue-loader": "~15.4.0"

,

在我的 Vue 文件（加载 webview 的位置）中，我像这样加载网站：

<webview    @loaded="onWebViewLoaded" :src="webViewSrc"
                     :builtInZoomControls="false"
                     :displayZoomControls="false"
                     :debugMode="true"
/>

然后在 onWebViewLoaded 我尝试这样做： 让 myWebChromeClientClass = androidVm.webkit.WebChromeClient.extend(

                    onShowFileChooser: function (WebView, ValueCallback, FileChooserParams) 
                        // FileChooserParams.createIntent()

                        camera.takePicture() // Using nativescript-camera
                            .then(function (imageAsset) 
                                console.log("Result is an image asset instance");
                                var image = new Image();
                                image.src = imageAsset;
                                console.log(image)
                            ).catch(function (err) 
                            console.log("Error -> " + err.message);
                        );

                        return false
                    
                );
                let myWebChromeClient = new myWebChromeClientClass();
                webView.android.setWebChromeClient(myWebChromeClient);

目前，我正在努力让 nativescript 相机在拍照后表现良好（总是返回“取消”），但我知道有一种方法可以使用 FileChooserParams 显示本地文件输入选择，但我无法做到这一点作为我在网上找到的最接近的解决方案是 Java 并且不确定如何将其转换为 javascript / Vue。

还有什么想法吗？

【参考方案1】：

您必须扩展 android.webkit.WebChromeClient 并将其分配给 nativeView。

您将不得不实现onShowFileChooser 方法，使用 Intent 或其他方式处理文件的选择。

【讨论】：

谢谢，但您对如何在 NativeScript (Vue) 上执行此操作有任何想法吗？

你可以参考related forum thread here，它展示了一个最小的例子。

谢谢。我一直在尝试很多事情，并浏览了很多资源以找到解决方案，但没有运气。看看我更新的原始帖子。您有什么想法可以解决我的问题吗？

只要用文件uri调用值回调，ValueCallback.onReceiveValue(android.net.Uri.fromFile(new java.io.File(imageAsset.android)));

使用你的解决方案我得到这个错误：“java.lang.ClassCastException: android.net.Uri$HierarchicalUri cannot be cast to android.net.Uri[]”。