Bot Builder:如何在自适应卡片表单中实现文件上传功能
自适应卡片文件上传的实现方案
首先明确一点:自适应卡片规范本身并没有原生的文件上传输入控件,但我们可以结合 Bot 框架的渠道能力和自定义交互来实现这个功能,下面是具体的步骤和代码修改建议:
核心思路
因为自适应卡片没有内置的文件上传字段,我们需要通过「自定义提交按钮」触发文件上传流程,然后根据 Bot 运行的渠道(比如 Teams、Web Chat)来适配具体的上传逻辑。
步骤1:修改自适应卡片,添加文件上传按钮
在你现有的 CreateAdaptiveCardwithEntry 方法里,给卡片的 Actions 列表添加一个专门的「上传文件」提交按钮,通过 Data 字段标记这个动作的类型,方便后端识别:
public Attachment CreateAdaptiveCardwithEntry() { var adaptiveCard = new AdaptiveCard("1.4") { Body = new List<AdaptiveElement> { // 保留你已有的表单字段,比如: new AdaptiveTextInput { Id = "userName", Label = "Full Name", IsRequired = true }, new AdaptiveTextInput { Id = "email", Label = "Email Address", Type = AdaptiveTextInputType.Email, IsRequired = true } }, Actions = new List<AdaptiveAction> { // 新增文件上传按钮 new AdaptiveSubmitAction { Title = "Upload File", Data = JObject.FromObject(new { action = "initiateUpload" }) }, // 保留你原有的表单提交按钮 new AdaptiveSubmitAction { Title = "Submit Form", Data = JObject.FromObject(new { action = "submitForm" }) } } }; return new Attachment { ContentType = AdaptiveCard.ContentType, Content = adaptiveCard }; }
步骤2:后端处理上传触发动作
当用户点击「上传文件」按钮时,Bot 会收到带有 action: initiateUpload 的提交数据,我们需要在消息处理逻辑里捕获这个动作,并根据不同渠道发起上传流程:
protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken) { if (turnContext.Activity.Value != null) { var actionData = JObject.FromObject(turnContext.Activity.Value); var actionType = actionData["action"]?.ToString(); // 处理文件上传触发请求 if (actionType == "initiateUpload") { // 根据渠道适配上传逻辑 switch (turnContext.Activity.ChannelId) { case "msteams": // Teams 渠道:利用 Teams 原生文件上传能力 var teamsUploadCard = new Attachment { ContentType = AdaptiveCard.ContentType, Content = new AdaptiveCard("1.4") { Body = new List<AdaptiveElement> { new AdaptiveTextBlock { Text = "请上传你的文件:" } }, Actions = new List<AdaptiveAction> { // 引导用户通过 Teams 原生文件上传功能 new AdaptiveOpenUrlAction { Title = "选择文件上传", Url = new Uri("https://teams.microsoft.com/l/fileUploadDialog?context=...") } } } }; await turnContext.SendActivityAsync(MessageFactory.Attachment(teamsUploadCard), cancellationToken); break; case "webchat": // Web Chat 渠道:需要前端配合处理文件选择 // 发送自定义事件触发前端文件选择器 var uploadEvent = Activity.CreateMessageActivity(); uploadEvent.Type = ActivityTypes.Event; uploadEvent.Name = "requestFileUpload"; await turnContext.SendActivityAsync(uploadEvent, cancellationToken); break; default: await turnContext.SendActivityAsync("当前渠道暂不支持文件上传功能。", cancellationToken); break; } } // 处理表单提交逻辑 else if (actionType == "submitForm") { // 获取表单数据 var userName = actionData["userName"]?.ToString(); var email = actionData["email"]?.ToString(); // 结合之前上传的文件信息(从 Activity.Attachments 中获取)完成后续处理 await turnContext.SendActivityAsync($"表单已提交!姓名:{userName},邮箱:{email}", cancellationToken); } } else { // 发送初始表单卡片 var card = CreateAdaptiveCardwithEntry(); await turnContext.SendActivityAsync(MessageFactory.Attachment(card), cancellationToken); } }
补充说明
- 渠道兼容性:不同聊天渠道对文件上传的支持程度不同,Teams 有完善的原生集成,Web Chat 需要前端额外开发处理逻辑,部分小众渠道可能不支持。
- 文件接收:用户完成上传后,Bot 会收到带附件的消息活动,可通过
turnContext.Activity.Attachments获取文件元数据和下载链接。 - 权限配置:确保 Bot 拥有读取用户上传文件的权限(比如 Teams 中需配置对应应用权限)。
内容的提问来源于stack exchange,提问作者Soufien Hajji
相关产品推荐
相关产品推荐

