时间戳

首页 > 解决方案 > 如何以编程方式将文件添加到从 Windows 窗体到网页的文件上传控件

c# - 如何以编程方式将文件添加到从 Windows 窗体到网页的文件上传控件

问题描述

我在 C# windows 应用程序中使用 WebView2，我希望能够上传屏幕截图。我捕获屏幕并将其保存到本地硬盘驱动器上的文件 (jpg) 中。我想将此文件附加（上传）到使用 WebView2 在 Windows 窗体上显示的网页上的 FILEUPLOAD 控件。

在我们切换到 WebView2 之前，我使用的是 CEFSHARP 浏览器并使用 DOM 上传文件。

CEFSHAPRP 将 DOM 对象包装在浏览器控件中，因此使用此代码非常容易：

 if (client == null)
            {
                client = browser.GetDevToolsClient();
                dom = client.DOM.GetDocumentAsync();
            }

            await Task.Run(async () =>
             {
                 QuerySelectorResponse querySelectorResponse = await client.DOM.QuerySelectorAsync(dom.Result.Root.NodeId, "#fileupload");
                 _ = client.DOM.SetFileInputFilesAsync(new string[] { filename }, querySelectorResponse.NodeId);
             });

我没有看到 WebView2 控件中内置了类似的东西。我确实看到 WebView 有另一个名为 WebView2.DOM 的 nuget，但它需要我将整个项目从 .NET 框架 4.7.2 转换为 .netCore。

任何帮助将不胜感激。我对 WebView2 很陌生，看不到如何访问 DOM 来实现这一点。我正在使用 .net 框架 4.7.2

***** 6 月 17 日更新 *****

我安装了 Microsoft.Web.WebView2.DevToolsProtocolExtension 并尝试使用我已经使用 CEFSHARP 的现有框架。

DevToolsProtocolHelper helper = webView21.CoreWebView2.GetDevToolsProtocolHelper();
                Task<DOM.Node> t = helper.DOM.GetDocumentAsync(-1,false);

                
                await Task.Run(async () =>
                 {
                     var querySelectorResponse = await helper.DOM.QuerySelectorAsync(t.Result.NodeId, "#fileupload");
                     _ = helper.DOM.SetFileInputFilesAsync(new string[] { filename }, querySelectorResponse);
                 });

当我尝试执行该行时，它给了我以下错误：

var querySelectorResponse = await helper.DOM.QuerySelectorAsync(t.Result.NodeId, "#fileupload");

无法将“System.__ComObject”类型的 COM 对象转换为接口类型“Microsoft.Web.WebView2.Core.Raw.ICoreWebView2”。此操作失败，因为 IID 为“{76ECEACB-0462-4D94-AC83-423A6793775E}”的接口的 COM 组件上的 QueryInterface 调用因以下错误而失败：不支持此类接口（来自 HRESULT 的异常：0x80004002 (E_NOINTERFACE)） .

有任何想法吗。感谢您对我已经收到的所有建议和帮助。

标签： c#file-upload.net-framework-versionwebview2

解决方案

我相信有三种方法可以做到这一点；

  1. 获取按钮的屏幕坐标，然后使用发送键发送回车键打开对话框。然后（当前 webview2 无法像 CefSharp 一样拦截此对话框）您将需要使用 WinAPI 来操作文件对话框窗口。

我以前用过1。发送键有点不可靠，等待对话框出现，然后通过对话框获得正确的时间。

  1. 使用 javascript，您应该能够添加到文件列表文件，然后将它们添加到元素中。我没有用 Webview2 试过这个。

  2. 最后，您已经知道的可以使用。在您的问题中，您使用 DOM.SetFileInputFilesAsync正如 amaitland 指出的那样，它来自chrome devtools 协议。. WebView2还支持 Chrome Devtools 协议，因此您可以有效地使用您已经知道的相同代码。

推荐阅读