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

【问题标题】：How do I programmatically add a file to a fileupload control from a windows form to a webpage如何以编程方式将文件添加到从 Windows 窗体到网页的文件上传控件
【发布时间】：2021-08-23 23:05:30
【问题描述】：

我在 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)） .

任何想法。感谢您给我的所有建议和帮助。

【问题讨论】：

相关（可能重复）：WebView2 (2020/06) -> Where's the DOM? 其中一个答案链接到this GitHub project，我还找到了another one。不过我自己没有测试过。
我查看了所有这些，但没有一个专门讨论文件上传。我可以将文件拖放到我的页面中，并将文件添加到要上传的文件的文件列表中。我想使用 WebView2 和 JavaScript 或 DOM 来自动化这个过程，就像我对 CEFSHARP 所做的那样
我知道它们与文件上传控件无关。但既然你说“我使用 CEFSHARP 浏览器并在我们切换到 WebView2 之前使用 DOM 上传文件” 和 “我对 WebView2 非常陌生，看不到如何访问DOM"，我认为提供通过 WebView2 访问 DOM 的方法的解决方案就足够了。没有？
我不认为这是可能的，因为安全。毕竟，它是一个浏览器，你不希望你的浏览器自动上传文件。你为什么不试试HttpClient？
请移除 CefSharp 标签，您使用 CefSharp 没有问题。谢谢。

标签： c# file-upload .net-framework-version webview2

【解决方案1】：

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

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

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

使用 javascript 你应该是able to add to the filelist 文件，然后将它们添加到元素中。我没有用 Webview2 尝试过。
最后，可以使用您已经知道的那个。在您的问题here you use DOM.SetFileInputFilesAsync 中，正如amaitland 指出的来自the chrome devtools protocol.。 WebView2 also supports the Chrome Devtools protocols，因此您可以有效地使用您已经知道的相同代码。

【讨论】：