You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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);
    }
}

补充说明

  1. 渠道兼容性:不同聊天渠道对文件上传的支持程度不同,Teams 有完善的原生集成,Web Chat 需要前端额外开发处理逻辑,部分小众渠道可能不支持。
  2. 文件接收:用户完成上传后,Bot 会收到带附件的消息活动,可通过 turnContext.Activity.Attachments 获取文件元数据和下载链接。
  3. 权限配置:确保 Bot 拥有读取用户上传文件的权限(比如 Teams 中需配置对应应用权限)。

内容的提问来源于stack exchange,提问作者Soufien Hajji

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.27 03:54:24