使文件输入归档在 Android nativescript vue webview 上工作

Question

Playground.

上的 VUE 完整解决方案

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

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

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

我用的是tns-android版本：6.1.1

更新 1

我使用的是哪个平台？

Android
10.0
模拟器。像素 3a

关于堆栈的更多信息：

命令行界面：6.1.2
nodejs: v10.16.0
tns-核心模块：tns-核心模块@6.1.1
运行时间：

"tns-android": { "version": "6.1.1" }, "tns-ios": { "version": "6.1.0" }
插件：

"dependencies": {

"@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-camera 在拍照后表现正常（总是 returns 'canceled'），但我知道有一种方法可以显示本机文件输入选择，使用FileChooserParams 但我无法完成这项工作，因为我在网上找到的最接近的解决方案是 Java 并且不确定如何将其转换为 Javascript / Vue.

还有什么想法吗？

Answer 1

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

您将必须实施 onShowFileChooser 方法，使用 Intent 或其他方式处理文件选择。

使文件输入归档在 Android nativescript vue webview 上工作

Making file input filed work on Android nativescript vue webview

android

nativescript

nativescript-vue

Playground.

更新 1

我使用的是哪个平台？

关于堆栈的更多信息：