当我在 Flutter WebView 中点击上传照片时，我想从手机上传照片
Doğ*_*MAZ 1 webview dart flutter flutterwebviewplugin webview-flutter
当我在 Flutter WebView 中点击网站上的照片上传输入时，我想从手机中选择并上传照片。我不知道如何解决这个问题。你能帮我吗？
\n网站代码如下：
\n<div class="foto-upload">\n <label class="foto-buton">\n <input type="file" name="resim" multiple="multiple" id="fileupload">\n <i class="fa fa-upload"></i>\n <span>FOTO\xc4\x9eRAF EKLE</span>\n <b>YA DA S\xc3\x9cR\xc3\x9cKLE BIRAK</b>\n </label>\n <input type="hidden" name="thumb_id" id="thumb_id" value="">\n <div class="foto-list">\n <div class="foto-count">EKLED\xc4\xb0\xc4\x9e\xc4\xb0N\xc4\xb0Z FOTO\xc4\x9eRAF ADED\xc4\xb0: \n <span id="mediaCount" data-total="0">0/10</span>\n <span id="mediaStatus"></span>\n <span id="filePercent"></span>\n </div>\n <ul>\n <li><i class="fa fa-image"></i></li>\n <li><i class="fa fa-image"></i></li>\n <li><i class="fa fa-image"></i></li>\n <li><i class="fa fa-image"></i></li>\n <li><i class="fa fa-image"></i></li>\n <li><i class="fa fa-image"></i></li>\n <li><i class="fa fa-image"></i></li>\n <li><i class="fa fa-image"></i></li>\n <li><i class="fa fa-image"></i></li>\n <li><i class="fa fa-image"></i></li>\n </ul>\n </div>\n <div class="clear"></div>\n</div>\n以下是 Flutter/Dart 代码：
\nWebView(\n initialUrl: '***',\n onWebViewCreated: (webViewController) {\n widget._controllerCompleter.future\n .then((value) => widget._controller = value);\n widget._controllerCompleter.complete(webViewController);\n },\n onPageStarted: (url) {\n setState(() {\n loadingPercentage = 0;\n });\n },\n onProgress: (progress) {\n setState(() {\n loadingPercentage = progress;\n });\n },\n onPageFinished: (url) {\n setState(() {\n loadingPercentage = 100;\n });\n },\n javascriptMode: JavascriptMode.unrestricted,\n javascriptChannels: _createJavascriptChannels(context),\n),\n您可以使用该flutter_inappwebview插件（我是作者）来处理文件上传或直接使用类似<input type="file" accept="image/*" capture>.
为了能够管理文件上传，您需要针对 Android 和 iOS 进行额外设置。在线查看启用相机进行 HTML 输入官方文档！
以下是使用当前最新插件版本 6 ( 6.0.0-beta.18 )的示例：
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:permission_handler/permission_handler.dart';
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
if (!kIsWeb &&
kDebugMode &&
defaultTargetPlatform == TargetPlatform.android) {
await InAppWebViewController.setWebContentsDebuggingEnabled(kDebugMode);
}
await Permission.camera.request();
await Permission.microphone.request(); // if you need microphone permission
runApp(const MaterialApp(home: MyApp()));
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final GlobalKey webViewKey = GlobalKey();
InAppWebViewController? webViewController;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("InAppWebView test"),
),
body: Column(children: <Widget>[
Expanded(
child: InAppWebView(
key: webViewKey,
initialData: InAppWebViewInitialData(data: """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<label for="avatar">Choose photos:</label>
<input type="file" name="resim" multiple="multiple" id="fileupload">
<br />
<br />
<label for="avatar">Take a photo:</label>
<input type="file" accept="image/*" capture>
</body>
</html>
"""),
onWebViewCreated: (controller) {
webViewController = controller;
},
),
),
]));
}
}
| 归档时间： |
|
| 查看次数： |
2792 次 |
| 最近记录： |