如何在Xamarin Forms的WebView中实现点击相机图标唤起文件选择器？是否支持纯Xamarin Forms实现？

嘿，这个问题我之前帮好几个开发者解决过～严格来说，纯Xamarin Forms（完全不写任何平台原生代码）是没法实现这个需求的，因为WebView里点击相机图标触发文件选择的逻辑，需要拦截平台级的WebView回调，而Xamarin Forms自带的WebView控件并没有暴露这个能力。不过别担心，我们可以通过**自定义渲染器（Custom Renderer）**来搞定，把平台特定的逻辑封装起来，在Forms层只需要用我们自定义的WebView控件，体验上和纯Forms开发没啥区别。

下面给你完整的实现步骤和代码，直接抄过去改改命名空间就能用：

1. Forms层自定义WebView #

首先在共享项目里创建一个自定义WebView，用来标记需要启用文件选择功能的WebView：

using Xamarin.Forms;

namespace YourAppName // 替换成你的项目命名空间
{
    public class CustomWebView : WebView
    {
        // 可选：定义事件，用于在Forms层响应文件选择完成的结果
        public event EventHandler<string> FileSelected;

        public void OnFileSelected(string filePath)
        {
            FileSelected?.Invoke(this, filePath);
        }
    }
}

然后在XAML页面里使用这个自定义WebView：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppName"
             x:Class="YourAppName.MainPage">
    <!-- 替换成你要加载的带相机图标的网页地址 -->
    <local:CustomWebView x:Name="MyWebView" Source="https://your-target-webpage.com" />
</ContentPage>

2. Android平台自定义渲染器 #

在Android项目里创建渲染器，拦截WebChromeClient的文件选择回调，唤起系统文件选择器（包含相机选项）：

第一步：添加权限 #

在AndroidManifest.xml里添加以下权限：

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-feature android:name="android.hardware.camera" android:required="false" />

第二步：编写渲染器代码 #

using Android.App;
using Android.Content;
using Android.OS;
using Android.Webkit;
using YourAppName;
using YourAppName.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebViewRenderer))]
namespace YourAppName.Droid
{
    public class CustomWebViewRenderer : WebViewRenderer
    {
        private static IValueCallback _fileUploadCallback;
        private static IValueCallback _fileUploadCallbackAboveL;
        private const int FileChooserResultCode = 1;

        public CustomWebViewRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                // 启用JavaScript和文件访问权限
                Control.Settings.JavaScriptEnabled = true;
                Control.Settings.AllowFileAccess = true;
                Control.Settings.AllowContentAccess = true;
                // 设置自定义WebChromeClient拦截文件选择请求
                Control.SetWebChromeClient(new CustomWebChromeClient((CustomWebView)Element));
            }
        }

        public override void OnActivityResult(int requestCode, Result resultCode, Intent intent)
        {
            base.OnActivityResult(requestCode, resultCode, intent);

            if (requestCode != FileChooserResultCode) return;

            Android.Net.Uri result = intent?.Data ?? (resultCode == Result.Ok ? Android.Net.Uri.Empty : null);

            // 处理不同Android版本的回调
            if (_fileUploadCallbackAboveL != null)
            {
                HandleAboveLVersionResult(resultCode, intent);
            }
            else if (_fileUploadCallback != null)
            {
                _fileUploadCallback.OnReceiveValue(new[] { result });
                _fileUploadCallback = null;
            }
        }

        private void HandleAboveLVersionResult(Result resultCode, Intent intent)
        {
            Android.Net.Uri[] results = null;

            if (resultCode == Result.Ok && intent != null)
            {
                string dataString = intent.DataString;
                ClipData clipData = intent.ClipData;

                if (clipData != null)
                {
                    results = new Android.Net.Uri[clipData.ItemCount];
                    for (int i = 0; i < clipData.ItemCount; i++)
                    {
                        results[i] = clipData.GetItemAt(i).Uri;
                    }
                }
                else if (!string.IsNullOrEmpty(dataString))
                {
                    results = new[] { Android.Net.Uri.Parse(dataString) };
                }
            }

            _fileUploadCallbackAboveL?.OnReceiveValue(results);
            _fileUploadCallbackAboveL = null;
        }

        // 自定义WebChromeClient，拦截文件选择请求
        private class CustomWebChromeClient : WebChromeClient
        {
            private readonly CustomWebView _formsWebView;

            public CustomWebChromeClient(CustomWebView formsWebView)
            {
                _formsWebView = formsWebView;
            }

            // 适配Android 5.0以下版本
            public override bool OnShowFileChooser(Android.Webkit.WebView webView, IValueCallback filePathCallback, FileChooserParams fileChooserParams)
            {
                _fileUploadCallback = filePathCallback;
                Intent intent = fileChooserParams.CreateIntent();
                try
                {
                    ((Activity)Forms.Context).StartActivityForResult(intent, FileChooserResultCode);
                }
                catch (ActivityNotFoundException)
                {
                    _fileUploadCallback = null;
                    return false;
                }
                return true;
            }

            // 适配Android 5.0及以上版本
            public override bool OnShowFileChooser(Android.Webkit.WebView webView, IValueCallback filePathCallback, FileChooserParams fileChooserParams)
            {
                _fileUploadCallbackAboveL = filePathCallback;
                Intent intent = fileChooserParams.CreateIntent();
                try
                {
                    ((Activity)Forms.Context).StartActivityForResult(intent, FileChooserResultCode);
                }
                catch (ActivityNotFoundException)
                {
                    _fileUploadCallbackAboveL = null;
                    return false;
                }
                return true;
            }
        }
    }
}

3. iOS平台自定义渲染器 #

在iOS项目里创建渲染器，拦截WKUIDelegate的文件选择回调，提供相机/相册选择选项：

第一步：添加权限描述 #

在Info.plist里添加以下权限说明（否则会被应用商店拒绝）：

<key>NSCameraUsageDescription</key>
<string>需要访问相机来拍摄照片</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问相册来选择照片</string>

第二步：编写渲染器代码 #

using Foundation;
using UIKit;
using WebKit;
using YourAppName;
using YourAppName.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebViewRenderer))]
namespace YourAppName.iOS
{
    public class CustomWebViewRenderer : WkWebViewRenderer, IWKUIDelegate
    {
        private CustomWebView _formsWebView;

        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                _formsWebView = (CustomWebView)e.NewElement;
                // 设置自定义UIDelegate拦截文件选择请求
                this.UIDelegate = this;
            }
        }

        // 拦截WebView的文件选择请求
        [Export("webView:runOpenPanelWithParameters:initiatedByFrame:completionHandler:")]
        public void RunOpenPanel(WKWebView webView, WKOpenPanelParameters parameters, WKFrameInfo frame, Action<NSUrl[]> completionHandler)
        {
            // 创建选择弹窗，让用户选相机或相册
            var alert = UIAlertController.Create("选择图片", "", UIAlertControllerStyle.ActionSheet);

            // 相册选项
            alert.AddAction(UIAlertAction.Create("从相册选择", UIAlertActionStyle.Default, (action) =>
            {
                LaunchImagePicker(UIImagePickerControllerSourceType.PhotoLibrary, completionHandler);
            }));

            // 相机选项（仅当设备有相机时显示）
            if (UIImagePickerController.IsSourceTypeAvailable(UIImagePickerControllerSourceType.Camera))
            {
                alert.AddAction(UIAlertAction.Create("拍照", UIAlertActionStyle.Default, (action) =>
                {
                    LaunchImagePicker(UIImagePickerControllerSourceType.Camera, completionHandler);
                }));
            }

            // 取消选项
            alert.AddAction(UIAlertAction.Create("取消", UIAlertActionStyle.Cancel, (action) =>
            {
                completionHandler(null);
            }));

            // 弹出选择弹窗
            UIApplication.SharedApplication.KeyWindow.RootViewController.PresentViewController(alert, true, null);
        }

        // 唤起图片选择器
        private void LaunchImagePicker(UIImagePickerControllerSourceType sourceType, Action<NSUrl[]> completionHandler)
        {
            var picker = new UIImagePickerController();
            picker.SourceType = sourceType;
            picker.MediaTypes = new string[] { UTType.Image.ToString() };
            picker.AllowsEditing = false;

            // 选择完成回调
            picker.FinishedPickingMedia += (sender, args) =>
            {
                var imageUrl = args.ImageUrl;
                completionHandler(new[] { imageUrl });
                ((UIImagePickerController)sender).DismissViewController(true, null);
                // 通知Forms层文件选择完成
                _formsWebView?.OnFileSelected(imageUrl.Path);
            };

            // 取消选择回调
            picker.Canceled += (sender, args) =>
            {
                completionHandler(null);
                ((UIImagePickerController)sender).DismissViewController(true, null);
            };

            UIApplication.SharedApplication.KeyWindow.RootViewController.PresentViewController(picker, true, null);
        }
    }
}

4. 注意事项 #

• 权限配置：Android和iOS的权限必须正确配置，否则会出现崩溃或权限被拒的情况
• 网页兼容性：确保你的网页里的相机图标触发的是标准的<input type="file" accept="image/*" capture="camera">这类文件选择控件，否则WebView无法拦截到请求
• 版本适配：代码已经兼容了主流的Android和iOS版本，无需额外修改

内容的提问来源于stack exchange，提问作者I'm Coder