WebView2 系列之- ts 向 c# 传递文件对象

背景

WebView2 中,前端到后端的消息传递,通常是不支持传递对象的。但是我在查阅官方文档时发现了一个例外,那就是方法postMessageWithAdditionalObjects

如何传递附加对象

webview2中,前端 js 向后端传递消息通常使用 window.chrome.webview.postMessage 方法,postMessage的定义如下:

ts 复制代码
     /**
     * When the page calls postMessage, the message parameter is converted to JSON and is posted
     * asynchronously to the WebView2 host process. This will result in either the
     * CoreWebView2.WebMessageReceived event or the CoreWebView2Frame.WebMessageReceived event being
     * raised, depending on if postMessage is called from the top-level document in the WebView2
     * or from a child frame. See CoreWebView2.WebMessageReceived( Win32/C++, .NET, WinRT).
     * See CoreWebView2Frame.WebMessageReceived( Win32/C++, .NET, WinRT).
     * @param message The message to send to the WebView2 host. This can be any object that can be
     *                serialized to JSON.
     */
    postMessage(message: any) : void;

当我们使用postMessage传递任何数据类型时,都将被转为 json 字符串进行传递。

postMessageWithAdditionalObjects 接受两个参数,第一个参数和postMessage的参数一样,第二个参数允许传递一个 js 对象列表,它会被转换为原生代码中对应的类。

cs 复制代码
/**
     * When the page calls `postMessageWithAdditionalObjects`, the `message` parameter is sent to WebView2 in the same
     * fashion as {@link WebView.postMessage}.
     * Objects passed as 'additionalObjects' are converted to their native types and will be available in the
     * `CoreWebView2WebMessageReceivedEventArgs.AdditionalObjects` property.
     * @param message The message to send to the WebView2 host. This can be any object that can be serialized to JSON.
     * @param additionalObjects A sequence of DOM objects that have native representations in WebView2.
     * This parameter needs to be ArrayLike.
     *
     * The following DOM types are mapped to native:
     * DOM    | Win32              | .NET                | WinRT
     * ------ | ------------------ | ------------------- | ---------------------------
     * File   | ICoreWebView2File  | System.IO.FileInfo  | Windows.Storage.StorageFile
     *
     * `null` or `undefined` entries will be passed as `null` type in WebView2. Otherwise if an invalid or unsupported
     * object is passed via this API, an exception will be thrown and the message will fail to post.
     */
    postMessageWithAdditionalObjects(message: any, additionalObjects: ArrayLike<any>): void;

使用示例

经测试,目前只支持前端的File类型,使用示例如下:

前端:

html 复制代码
 <input id="file" type="file" value="选择文件" accept="*/*"/>
ts 复制代码
import {onMounted} from "vue";

onMounted(() => {
  const file = document.querySelector("#file") as HTMLInputElement | null;
  file?.addEventListener("change", () => {
    console.log(file.files);
    if (file.files != null) {
      window.chrome.webview.postMessageWithAdditionalObjects("files", file.files);//files的类型是 FileList
    }
  })
})

后端接收的方法:

cs 复制代码
#region 监听前端消息

webview.CoreWebView2.WebMessageReceived += CoreWebView2OnWebMessageReceived;

#endregion

private void CoreWebView2OnWebMessageReceived(object? sender, CoreWebView2WebMessageReceivedEventArgs e)
{
    var message = e.TryGetWebMessageAsString();
    var objs = e.AdditionalObjects;
    var a = e.Source;
    Debug.WriteLine(JsonSerializer.Serialize(objs[0]));
}

当前端选择一个图片时,前端打印选择的结果:

传递给后端,后端接收到的数据:

前端从file.files拿到的数据是没有路径的,传给后端后有了完整路径,是不是很神奇。

相关推荐
夏梦春蝉35 分钟前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室2 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子3 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W4 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端5 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~5 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程5 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏5 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083166 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头7 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github