文件上传在 Webview、Flutter 中不起作用

Question

我有一个网站，我使用 webview_flutter 插件将该网站转换为 flutter android 应用程序，一切正常。

但是有一个问题，网站上有一个表格，表格中有一个文件输入。在网站上一切正常，但是当我单击使用 webview_flutter 插件创建的 Android 应用程序上传文件时，文件输入不起作用。

当我点击上传文件时，它不会打开任何弹出窗口或任何允许我从手机中选择文件并上传到表单的内容。

这是我的 main.dart 代码：

import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:custom_splash/custom_splash.dart';
import 'package:connectivity/connectivity.dart';
import 'package:selfcare/nointernet.dart';

void main() {

  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());

}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Self Care",
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.red,
        ),
        home: Scaffold(body: splash()));
  }
}

class splash extends StatefulWidget {
  @override
  _splashState createState() => _splashState();
}

class _splashState extends State<splash> {
  String result = '';
  var Colorsval = Colors.white;

  @override
  void initState() {
    CheckStatus();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    if (result != null && result == "Connected") {
      return CustomSplash(
        //backGroundColor: Color(0xFFFF9800),
        imagePath: "assets/images/logo.png",

        home: WebViewClass(),
        duration: 10,
        animationEffect: "zoom-in",
      );
    } else if (result != null && result == "NoInternet") {
      return CustomSplash(
        //backGroundColor: Color(0xFFFF9800),
        imagePath: "assets/images/logo.png",

        home: NoInternetPage(),
        duration: 10,
        animationEffect: "zoom-in",
      );
    } else if (result == null) {
      return CustomSplash(
        //backGroundColor: Color(0xFFFF9800),
        imagePath: "assets/images/logo.png",

        home: NoInternetPage(),
        duration: 10,
        animationEffect: "zoom-in",
      );
    } else {
      return CustomSplash(
        //backGroundColor: Color(0xFFFF9800),
        imagePath: "assets/images/logo.png",

        home: NoInternetPage(),
        duration: 10,
        animationEffect: "zoom-in",
      );
    }
  }

  void CheckStatus() {
    Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {
      if (result == ConnectivityResult.mobile ||
          result == ConnectivityResult.wifi) {
        ChangeValues("Connected", Colors.green[900]);
      } else {
        ChangeValues("NoInternet", Colors.red[900]);
      }
    });
  }

  void ChangeValues(String resultval, Color colorval) {
    setState(() {
      result = resultval;
      Colorsval = colorval;
    });
  }
}

class WebViewClass extends StatefulWidget {
  WebViewState createState() => WebViewState();
}

class WebViewState extends State<WebViewClass> {
  num position = 1;

  final key = UniqueKey();

  doneLoading(String A) {
    setState(() {
      position = 0;
    });
  }

  startLoading(String A) {
    setState(() {
      position = 1;
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Permission.mediaLibrary.request();
    Permission.phone.request();
    Permission.photos.request();
    Permission.storage.request();
    Permission.camera.request();
  }
  //Check Internet Code Starts

  //Check Internet Code Ended here
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //appBar: AppBar(title: Text('Show ProgressBar While Loading Webview')),
        appBar: PreferredSize(
          child: Container(),
          preferredSize: Size.fromHeight(0.0),
        ),
        body: IndexedStack(index: position, children: <Widget>[
          WebView(
            initialUrl: 'http://mywebsite.com',
            javascriptMode: JavascriptMode.unrestricted,
            key: key,
            onPageFinished: doneLoading,
            onPageStarted: startLoading,
            //onWebResourceError: ,
          ),
          Container(
            color: Colors.white,
            child: Center(
                child: CircularProgressIndicator(
              valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
            )),
          ),
        ]));
  }
}

这是我使用的flutter webview插件：

dependencies:
  webview_flutter: ^1.0.7

我也使用了一些权限来摆脱这个问题但没有解决它，权限：

Permission.mediaLibrary.request();
Permission.phone.request();
Permission.photos.request();
Permission.storage.request();
Permission.camera.request();

Answer 1

因为

webview_flutter 4.0.2

您可以轻松做到这一点，因为刚刚添加了对 Android 的支持。

为了实现此目的，您必须首先检查它运行的平台是否是 Android，然后设置您的自定义侦听器：

if (Platform.isAndroid) { // or: if (webViewController.platform is AndroidWebViewController)
    final myAndroidController = webViewController.platform as AndroidWebViewController;

    myAndroidController.setOnShowFileSelector( (params) async {
        // Control and show your picker
        // and return a list of Uris.

        return []; // Uris
    });
}

Answer 2

webview_flutter

插件尚未支持文件上传。您可以在此处跟踪与此问题相关的当前打开的票证。同时，您可以使用 flutter_inappwebview 或 flutter_webview_plugin 作为解决方法。

Answer 3

我设法使用 webview_flutter_pro 插件让它工作。我已经在这里发布了有关如何使其工作的详细信息：

如何在webview_flutter中从图库或相机android中打开文件选择器？

Answer 4

这是 Flutter 中长期存在的问题，https://github.com/flutter/flutter/issues/27924 特别是在 Android 上。但是，通过

webview_flutter 4.0.2

，此功能已得到修复，现在可以完美运行。

在

initState

中，只需调用以下代码即可

if (Platform.isAndroid) {
      final androidController = controller.platform as AndroidWebViewController;
      await androidController.setOnShowFileSelector(_androidFilePicker);
    }

现在，在 WebView 上按下每个文件上传按钮时，都会调用

_androidFilePicker

函数。在此功能中，您可以使用任何文件选择器来选择并上传文件。如果您需要详细了解，有一篇很棒的博客文章，其中包含有关使用 Flutter 上传文件的代码片段。